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本 书 分 为 上 、 下 两 篇 。 上 篇 为 实 训 ( 课 内 同步 实验 ), 包 括 HTML 基础 (Web 前 端 开发 环境 配置 与 
HTML 基础 ,格式 化 文本 、 段 落 与 列表 , 超 链 接 与 多 媒体 文件 应 用 )、 页 面 布局 技术 (DIV 十 CSS 综合 应 用 、 
DIV 十 CSS 布局 规划 、 表 格 与 表格 页 面 布局 .表单 页 面 设计 )、HTML5 基础 与 CSS3 应 用 、JavaScript 应 用 
(JavaScript 基础 应 用 、 高 级 应 用 、 事 件 分 析 、DOM 与 BOM 应 用 案例 .HTML5 高 级 应 用 案例 )。 内 含 13 次 
实 训 、39 个 实 训 项 目 、26 个 课外 拓展 训练 项 目 。 下 篇 为 实践 (课程 设计 ) ,包括 高 校 网 站 、IT 企业 网 站 和 社 
会 团体 网 站 设计 与 开发 3 个 典型 案例 。 

本 书 内 容 结 构 合理 , 实 训 项 目 设计 由 浅 人 深 \、 循 序 渐进 、 经 典 实用 ,实验 过 程 详细 , 实 训 项 目 切 合 实际 ， 
真实 性 强 。 
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本 书 第 3 版 是 作者 在 从 事 多 年 Web 前 端 开发 技术 教学 研究 的 基础 上 ,结合 多 年 来 100 
多 所 高 等 院 校 使 用 反馈 的 意见 ,适时 增加 了 HTML5 和 CSS3 方面 的 实 训 项 目 , 重 新 整合 与 
创新 而 成 ,同时 本 书 作 为 “第 四 届 中 国 大 学 出 版 社 图 书 奖 优秀 教材 二 等 奖 ” 获 奖 教材 (Web 
前 端 开发 技术 一 一 HTML5 、CSS3 、JavaScript) 第 3 版 的 配套 实验 与 实践 教材 。 

随 着 高 校 转型 发 展 的 需要 ,应 用 技术 型 大 学 (学 院 ) 需 要 培养 更 多 与 行业 对 接 的 应 用 技 
术 型 人 才 , 更 加 注重 毕业 生 的 实践 动手 能 力 工程 项 目 能 力 及 创新 能 力 的 培养 ,所 以 加 强 实 
践 环节 建设 ,强化 应 用 技术 型 高 校 实践 教材 建设 工作 尤为 重要 。 结 合 IT 行业 发 展 的 需要 
和 各 类 高 等 院 校 实际 教学 反馈 ,编者 在 保持 第 2 版 教材 原 有 特色 和 编写 风格 的 基础 上 ,根据 
《Web 前 端 开发 技术 一 HTML5、CSS3 ,JavaScript) 第 3 版 教材 知识 体系 结构 ,对 实验 与 实 
践 教材 的 体系 结构 重新 进行 适应 性 修订 ,增加 HTML5 及 CSS3 等 方面 的 实 训 项 目 , 并 对 所 
有 的 实 训 项 目 进行 优化 ,更 新 部 分 课外 拓展 训练 项 目 , 以 期 满足 专业 教学 和 实践 技能 培养 的 
需要 。 

1. 本 书 特 点 

本 书 结合 国内 流行 的 Web 前 端 开发 工程 师 岗位 需求 ,将 岗位 技能 培养 和 专业 知识 学 习 
融入 实验 项 目 中 去 ,实现 在 实践 项 目 中 掌握 与 灵活 运用 。 全 书 根据 Web 前 端 开发 工程 师 所 
必 备 知识 与 能 力 要 求 统筹 规划 了 13 次 实 训 ,精心 设计 了 39 个 经 典 实 训 项 目 。 实 验 与 实践 
教材 在 改版 中 始终 坚持 "项 目 化 设计 、 案 例 式 驱动 .过 程式 指导 、 探 究 式 实践 "的 原则 ,合理 编 
排 实验 内 容 ,循序 渐进 ,并 将 CSS 技术 贯穿 到 所 有 实 训 项 目 中 ,实现 HTML5、CSS3、DIV、 
JavaScript、DOM 完美 的 融合 。 通 过 真实 案例 深入 剖析 网 页 布局 的 思路 和 方法 ,启发 式 引导 
学 生 自 主 地 去 完成 实 训 项 目 。 

2. 本 次 修订 内 容 

第 3 版 修订 教材 共 规划 了 五 个 部 分 。 第 一 部 分 为 HTML 基础 ,第 二 部 分 为 页 面 布局 
技术 ,第 三 部 分 为 HTML5 基础 与 CSS3 应 用 、 第 四 部 分 为 JavaScript 应 用 ,第 五 部 为 分 网 
站 设计 。 上 篇 中 13 次 实 训 ,分 别 为 实 训 1 Web 前 端 开发 环境 配置 与 HTML 基础 ; 实 训 
2 格式 化 文本 、 段 落 与 列表 ; 实 训 3 超 链接 与 多 媒体 文件 应 用 ; 实 训 4 DIV 十 CSS 综合 
运用 ; 实 训 5 DIV 十 CSS 布局 规划 ; 实 训 6 表格 与 表格 页 面 布局 ; 实 训 7 表单 页 面 设 
计 ; 实 训 8 HTML 基础 与 CSS3 应 用 ; 实 训 9 JavaScript 基础 应 用 ; 实 训 10 JavaScript 
高 级 应 用 ; 实 训 11 JavaScript 事件 分 析 ; 实 训 12 DOM 与 BOM 应 用 案例 ; 实 训 13 
HTML5 高 级 应 用 案例 。 下 篇 中 规划 了 3 个 课程 设计 案例 ,主要 运用 HTML5、DIV、CSS3、 
JavaScript 等 技术 构建 网 站 。 


Web 前 端 开 发 技术 实验 与 实践 一 一 日 TML5、CSS3、JavaScript( 第 3 乒 ) 





本 次 修订 删除 了 第 2 版 教材 中 的 实 训 7* 框 架 结 构 布 局 规划 ”, 将 第 2 版 中 实 训 8 表单 
页 面 设计 ? 改 为 第 3 版 的 实 训 7“ 表 单 页 面 设计 ”。 增 加 新 实 训 8"HTML5 基础 与 CSS3 应 
用 ”和 实 训 13“HTML5 高 级 应 用 案例 ”。 

3. 主要 内 容 

第 一 部 分 HTML 基础 

通过 实 训 项 目 讲解 Web 前 端 开发 环境 的 配置 HTML 基础 语法 ,标记 语法 ; 介绍 文本 
标记 、 段 落 与 排版 标记 、 列 表 及 多 媒体 文件 加 载 标记 的 应 用 。 通 过 实验 项 目 让 学 生 掌握 运用 
HTML 标记 如 何 设计 出 具有 文字 、 图 片 .音乐 ,视频 等 多 种 媒体 的 网 站 。 

第 二 部 分 ”页面 布局 技术 

通过 实 训 项 目 讲解 DIV 十 CSS 在 实际 工程 项 目 中 的 应 用 ,让 学 生 学 会 对 商业 网 站 布局 
进行 分 析 ,并 能 借助 DIV 十 CSS 结构 实现 商业 网 站 的 仿真 构建 ; 将 表格 .表单 等 传统 的 页 面 
布局 技术 与 DIV 十 CSS 页 面 布 局 技术 组 合 在 一 起 ,让 学 生 充 分 了 解 页 面 布 局 技术 的 发 展 过 
程 , 理 解 DIV 十 CSS 布局 技术 在 快速 网 站 构建 与 网 站 重 构 中 所 起 的 作用 ,设计 出 具有 结构 、 
表现 相 分 离 的 优秀 网 站 。 

第 三 部 分 “HTMLS 基础 与 CSS3 应 用 

通过 实 训 项 目 让 学 生 掌握 HTML5 和 CSS3 的 新 特性 。 借 助 于 HTML5 和 CSS3 新 特 
性 解决 Web 网 站 中 用 户 互动 页 面 的 设计 需要 和 改善 用 户 体验 ,结合 实 训 项 目的 讲解 ,培养 
学 生 用 HTML5 和 CSS3 解决 实际 网 站 设计 中 的 一 些 新 闻 题 的 能 力 ,设计 出 用 户 体 验 更 好 
的 优秀 网 站 。 

第 四 部 分 ”JavaScript 应 用 

通过 实 训 项 目 让 学 生 掌握 JavaScript 基本 语法 、 组 成 结构 ,程序 结构 、 隐 数 编程 方式 ; 
熟练 地 运用 JavaScript 的 DOM 与 BOM 技术 解决 Web 网 站 设计 中 用 户 互 动 页 面 的 设计 方 
法 ; 学 会 运用 HTML5 中 的 Canvas、Web Storage、Web 拖 忠 和 Web Worker 等 新 特性 解决 
实际 工程 问题 中 过 到 的 新 问题 ; 结合 Internet 上 真实 商业 网 站 的 实例 讲解 ,培养 学 生 分 析 
与 解决 问题 的 能 力 , 设 计 出 具有 结构 与 行为 相 分 离 的 优秀 网 站 。 

第 五 部 分 “网 站 设计 

以 高 等 学 校 IT 企业 和 社会 团体 网 站 为 典型 案例 ,详细 介绍 每 类 网 站 的 功能 概况 、 网 站 
页 面 布局 分 析 、 页 面 布局 结构 设计 、 导 航 菜单 设计 技术 以 及 网 站 各 页 面 开 发 基本 要 素 和 设计 
步骤 。 

4. 教学 资源 

(1) 提供 实 训 中 项 目 所 需 的 图 像 文字、 音 视 频 素 材 资源 。 

(2) 提供 一 套 完 整 的 所 有 实 训 项 目 源 代码 。 

(3) 提供 3 个 完整 网 站 设计 案例 的 全 套 代码 。 

(4) 提供 13 次 课外 拓展 训练 中 的 26 个 项 目的 源 代码 和 素材 资源 。 

全 书 再 版 修订 由 储 久 良 独 立 策 划 、 编 著 、 审 校 。 贾 波 、 叶 庆生 、 姜 枫 、 高 燕 、 陈 虹 、 肖 振 久 、 
陈 劲 新 、 刘 立 军 、 花 丽 、 赵 艳 辉 、 张 劳模 、 于 曦 \、 王 阐 、 边 玲 、 胡 英 等 老师 对 教材 的 再 版 工作 提出 
了 很 多 宝贵 意见 ,另外 , 囊 宝 华 、 朱 长 水 、 宦 臣 、 沈 群 等 教师 参加 了 本 书 的 编写 工作 。 值 此 青 


版 之 际 ,对 各 位 老师 再 次 表示 感谢 ! 

本 书 的 修订 与 再 版 得 到 清华 大 学 出 版 社 相 关 人 员 的 大 力 支持 与 合作 ,在 此 说 表 示 囊 心 
感谢 。 本 书 在 修订 的 过 程 中 ,编者 参阅 了 大 量 的 商业 网 站 开发 、Web 前端 开 发 和 JavaScript 
应 用 等 方面 的 书籍 与 网 络 资源 ,在 此 对 这 些 书 籍 与 资源 的 作者 表示 感谢 。 由 于 移动 互联 网 

技术 发 展 迅 速 ,加 上 编者 水 平 有 限 , 书 中 的 疏漏 和 不 足 在 所 难免 , 垦 请 各 位 专家 和 读者 批评 


指正 。 
编 者 
2018 年 5 月 于 苏州 方圆 。 云 山 诗意 
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第 一 部 分 
HTML 基 础 





实 训 1 Web 前 端 开 发 环境 
= 配置 与 HTML 基础 





【 实 训 目标 】 

(1) 了 解 Web 前 端 开 发 工程 师 岗位 需求 和 技术 要 求 。 

(2) 了 解 Web 前 端 开发 技术 基本 组 成 。 

(3) 掌握 HTML 文档 结构 ,学 会 编写 简单 的 HTML 程序 。 

(4) 学 会 使 用 EditPlus、WebStorm、HBuilder、Sublime Text 等 常用 Web 前 端 开 发 工具 。 
【 实 训 内 容 】 

(1) 通过 网 络 搜集 有 关 Web 前 端 开发 工程 师 岗 位 需要 和 技术 要 求 。 
(2) 安装 并 使 用 各 种 常用 的 Web 前 端 开发 工具 。 

(3) 安装 各 种 Web 浏览 器 软件 ,并 熟知 各 种 浏览 器 的 功能 与 差异 。 
(4) 掌握 EditPlus、HBuilder 等 HTML 集成 开发 环境 软件 的 功能 。 
(5) 使 用 EditPlus、HBuilder 等 编辑 软件 编写 简易 Web 网 页 程序 。 
【 实 训 项 目 】 

(1) Web 前 端 开 发 环境 配置 。 

(2) 新 生 简易 主页 设计 。 

(3) 用 EditPlus 自 定义 HTML 模板 。 

(4) meta 标记 、body 标记 属性 使 用 。 

(5) HTML、CSS、JavaScript 综合 编程 。 


项 目 1 Web 前 端 开发 环境 配置 


1. 实 训 要 求 

(1) 熟悉 各 种 常用 Web 前 端 开发 工具 的 功能 ,了 解 软件 安装 需求 。 

(2) 熟悉 各 种 常用 Web 浏览 器 的 功能 与 差异 。 

2. 实 训 内 容 

(1) 下 载 并 安装 常用 的 Web 前 端 开发 工具 。EditPlus 软件 下 载 URL: http://www. 
editplus. com/ download. html。 EditPlus 最 新 英文 版 为 EditPlus Text Editor 4. 3 Evaluation 
Version(epp430. exe) ,用 户 可 从 Internet 下 载 中 文 版 软件 包 进行 安装 。 

HBuilder 软件 (DCloud 即 数 字 天 堂 (北京 ) 网 络 技术 有 限 公 司 旗下 软件 产品 ) 下 载 
URL:http://www. dcloud.io/。 目 前 最 新 版 本 为 HBuilder 8. 8. 0。HBuilder 主要 用 于 开 
发 HTML、CSS JavaScript, 同 时 配合 HTML 的 后 端 脚本 语言 如 PHP、JSP 也 可 以 适用 ,还 
有 前 端的 预 编译 语言 如 Less 以 及 Markdown 都 适合 使 用 此 软件 进行 编辑 。 


Web 前 况 开 发 投 太 实验 与 实践 一 一 感 TML5.CSS3、JavaScript( 笋 3 版 ) 





Sublime Text 软件 下 载 URL:http://www. sublimetext. com/3。 目 前 版 本 是 Sublime 
Text 3, 是 一 款 轻 量 级 的 代码 编辑 器 。 

其 他 Web 前 端 开发 工具 用 户 可 根据 需要 进行 下 载 和 安装 。 

(2) 下 载 并 安装 各 种 主流 Web 浏览 器 软件 。Mozilla Firefox 是 由 Mozilla 基金 会 与 开 
源 团体 共同 开发 的 网 页 浏览 器 ,软件 下 载 的 官方 中 文 网 站 URL: http://firefox. com. cn/。 
下 载 软件 安装 包 名 为 Firefox-latest. exe, 双 击 后 进行 安装 并 运行 。 

Google Chrome 软件 下 载 URL: http://www. google. cn/intl/zh-CN/chrome/browser/ , 单 
击 “ 下 载 Chrome 浏览 器 ?开始 下 载 , 并 安装 运行 。 

Internet Explorer 是 微软 公司 推出 的 一 款 网 页 浏览 器 ,也 是 使 用 最 广泛 的 网 页 浏览 器 
之 一 。 最 新 版 本 是 IE 11( 适 用 于 Windows 7) ,用 户 自行 选择 安装 相关 版 本 的 浏览 器 。 软 件 
下 载 URL: http://www. microsoft. com/zh-cn/download/internet-explorer. aspx。 

3. 实 训 过 程 与 指导 

(1) 首先 从 指定 的 官方 网 站 或 Internet 上 下 载 相关 软件 包 到 本 地 磁盘 。 

(2) 分 别 安装 相关 软件 并 熟悉 软件 功能 。 

(3) 尝试 编写 最 简单 的 HTML 程序 。 

(4) 编写 常用 开发 工具 软件 的 使 用 说 明 书 。 


项 目 2 新 生 简 易 主页 设计 


1. 实 训 要 求 

(1) 掌握 HTML 文档 结构 ,学 会 编写 简易 的 HTML 文件 。 
(2) 掌握 HTML 文件 命名 规范 。 

(3) 学 会 使 用 EditPlus、HBuilder 等 编写 HTML 代码 。 
(4) 学 会 使 用 Web 浏览 器 查看 网 页 设计 效果 。 

2. 实 训 内 容 

(1) 学 会 用 EditPlus、HBuilder 等 编写 样 例 程序 。 

(2) 学 会 使 用 HTML 标记 ,如 head、body.title、p、hr 等 标记 。 
(3) 学 会 给 HTML 文件 命名 。 

3. 实 训 所 需 知 识 点 

(1) html 标记 


<html> .… </html> 


HTML 文档 结构 由 头 部 head 和 主体 body 构成 ,head 与 body 两 个 标记 均 为 成 对 标 
记 , 由 首 标记 和 尾 标 记 构 成 。 
(2) 头 部 head 标记 


< head> 
<meta charset = "UTF — 8"> 


<meta name = "Generator" content = "EditPlus@"> 
< meta name = "Ruthor”content = " "> 
<meta name = "Keywords" content = ""> 
<meta name = "Description" content = ""> 
<title> Document </title> 

</head> 


head 标记 中 通常 包含 标题 title、 样 式 style、 元 信息 meta、 脚 本 script 链接 link 等 标记 ， 
可 根据 网 页 设计 需要 添加 相关 标记 或 设置 标记 属性 。 
(3) 主体 body 标记 
<body> 
<hl > 1 号 标题 字 </hl > 
<p> 段 落 <br> 有 段落 </p> 
<hr width = "200px"> 
<blockquote > 段落 缩 进 </blockquote> 


<div id="" class="">…</div> 


< form method= "post" action=""> 


</form> 
</body> 


body 标记 是 网 页 信息 的 主要 载体 ,通常 可 以 包含 段落 p、 标 题字 hl 一 h6 ,换行 br、 表 单 
form 脚本 script 无 序列 表 ul、 水 平分 隔 线 hr 表格 table 等 标记 。 
(4) 标题 title 标记 


<title> 网 页 的 标题 </title> 

(5) 段落 p 标记 

<p align = "center"> 这 是 一 个 段落 </p> 

(6) 水 平分 隔 线 hr 标记 

<hr size= "3" color = "red" width= "80 % " align = "center"> 


水 平分 隔 线 可 以 设置 线 的 宽度 .颜色 、 线 粗细 、 对 齐 方式 等 属性 。 
(7) 样式 style 标记 


< style type = "text/css"> 
pffont - size:28pxicolor:blue; /x 设置 字体 大 小 ,颜色 x* /} 


</style> 
4. 实 训 过 程 与 指导 前 
编程 实现 如 图 1-1-1 所 示 的 页 面 , 具 体 步骤 如 下 : 1 
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欢迎 访问 我 的 简易 主页 











我 ， 生 于 1997 年 8 月 ， 北 京 人 ， 录 取 专 业 : 移动 互联 网 学 院 软件 工程 
专业 录取 ， 我 非常 高 兴 。 
所 在 班级 : 17 软 件 ， 学 号 : 1709200199 姓名 : 李 新 











1-1-1 设计 网 页 效果 图 


(1) 启动 EditPlus 或 HBuilder 等 软件 程序 ,从 文件 菜单 选择 新 建 HTML Page, 程 序 名 
为 *prj_1_3. html”。 
(2) 在 编辑 窗口 中 输入 代码 ,具体 代码 如 下 所 示 : 


<! -- prj_ 1 3.html --> 
<!doctype html > 
< html lang = "en"> 
< head > 
<meta charset = "UTF — 8"> 
<title> 新 生 简易 主页 设计 </title> 
< style type = "text/css"> 


p{ 
font - size:24px; /* 字体 大 小 24px */ 

color:blue; /* 颜色 蓝 色 * / 
text — indent:2em; /* 首 行 缩 进 2 个 字符 * / 
上 

</style> 

</head> 

<body> 


<h2 align = "center"> 欢 迎 访问 我 的 简易 主页 </h2 > 
< hr color = "red"> 
<p align = "center"> 我 , 生 于 1997 年 8 月 ,北京 人 ,录取 专业 : 移动 互联 网 学 院 软件 工程 专 
业 录 取 , 我 非常 高 兴 。< br /> 
所 在 班级 : 17 软件 ,学 号 : 1709200199&nbsp;&nbsp; 姓 名 : 李 新 </br> 
</p> 
</body> 
</html > 


(3) 编辑 完成 后 , 按 Ctrl+S 或 选择 “文件 ?菜单 中 的 “保存 ”命令 保存 文件 。 输 入 文件 
名 ,选择 “保存 ”, 返 回 到 编辑 状态 ,如 图 1-1-2 所 示 。 

(4) 然后 用 浏览 器 打开 prj_1_3. html, 查 看 网 页 效果 。 

同样 可 以 使 用 HBuilder 软件 来 编辑 此 文件 ,通过 实际 使 用 掌握 HBuilder 软件 相关 编 
辑 操 作 ,学 会 使 用 HBuilder 软件 的 各 种 快捷 键 , 提 高 代码 输入 速度 ,体验 编程 的 快乐 ! 编辑 
界面 如 图 1-1-3 所 示 。 
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2017/7/26 19:59 
2016/3/7 8:46 
2016/3/7 8:46 
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2016/3/7 846 









































1-1-2 “另存 为 ”对话 框 


~ [me Rc «~ El ene 


5] wm aT = 
= pr 3tal -> OO wnaen. MO 
2 <ldoctype html> 
3-<html lang="en” 
ed 欢 凶 访问 我 的 简易 主页 
<mieta charset="UTF-8》 
<titley 新 生效 易 主 醒 设 计 </titley> 
全 全 type="text/css"> 我 ， 生 于 1997 年 8 月 ， 北 京 人 ， 
i 到 业 ， 共 动 可 风 了 斩 
color:blue; /MD */ 人 
text-indent:2em; 1* 关 全 结 放 2 个 地 他 */ 所 在 班级 :17 软件 ， 学 号 : 
1709200199 姓名 : 李 新 


4 
5 
6 
7 
B- 
9 

10 


</style> 


<h2 align="center"> 欢 寻访 问 拷 的 篇 吻 主 页 </h2> 
<hr color="red"> 
<P align="center"> 我 , 生 于 1997 年 8 月 , 北京 人 ,录取 专业 
py 17 教 件 , 学 号 : 17992898199&nbsp;&nbsp; 姓 名 : 手 
</p> 
</body> 
22 </html> 














图 1-1-3 HBuilder 软件 编辑 界面 


项 目 3 用 EditPlus 自 定 义 HTML 模板 


1. 实 训 要 求 

(1) 学 会 使 用 EditPlus 软件 编写 HTML 模板 。 

(2) 学 会 加 载 用 户 自 定义 模板 。 

2. 实 训 内 容 

(1) 使 用 EditPlus 软件 直接 修改 默认 的 HTML 模板 template. html。 到 | 
(2) 使 用 EditPlus 自 定义 HTML 模板 ,加 载 新 建 HTML 模板 ,并 使 新 模板 生效 。 i 
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3. 实 训 过 程 与 指导 

(1) 加 载 默 认 HTML 模板 文档 。 从 菜单 栏 选 择 File (文件 )|New( 新 建 )| HTML Page 
(HTML 网 页 ), EditPlus 会 自动 加 载 程序 默认 的 “HTML 模板 ”, 模 板 名 为 “template. 
html”, 如 图 1-1-4 所 示 ,依据 此 模板 用 户 可 以 编写 自己 的 HTML 文档 。 但 有 时 需要 定义 符 


合 自己 格式 的 HTML 初始 化 文档 ,需要 进行 自 定义 。 


Vntitled3. htal * - EditPlus 


<meta charset="UTF-8"> 
<meta name="Generator" 
content="EditPlus®"> 

<meta name="Author" content= 
<meta name="Keywords" conan 
<meta name="Description" en ra 
<title>Document</title> 








</head> 








Dr 
日 量 EB 客户 六 编程 技术 _20 
日 加 实 下 项 目 | 
实验 





1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN" 
"http://www.w3.0rg/TR/html4/loo0se.dtd"> 

2 <html> 
<head> 

<title> New Document </title> 

<meta name="Generator" content="EditPlus"> 
<meta name="Author" content=" 

<meta name="Keywords" content=""> 

<meta name="Description" content=""> 
</head> 


</body> 
1 </html> 

















(b) 中 文 界面 
1-1-4 EditPlus 新 建 HTML 文档 默认 代码 窗口 


| 全 Untitled3. html 加 





(2) 查找 默认 HTML 模板 文件 。 从 菜单 栏 选择 Tools( 工 具 ) | Set Directories… (设置 
目录 ) ,弹出 如 图 1-1-5 所 示 的 Set Directories( 设 置 目 录 ) 对 话 框 , 单 击 Open( 打 开 ) 按 钮 , 进 
入 程序 安装 目录 ,如 图 1-1-6 所 示 。 


Untitled3. htal *# — EditPlus 





Frormreesnss | 
[ me | oot | emot | 





图 1-1-6 EditPlus 设置 目录 界面 


目录 里 有 templatex. html(XHTML 1. 0 Transitional 默认 加 载 模板 ) template. java 
(java 类 加 载 模板 ) ,template. html( 默 认 HTML 加 载 模板 ) ,如 图 1-1-7 所 示 。 























[a 
四 
| Ci\Program Files\EditPlus 3 

“文件 和 文件 夹 任务 。 人 zen_coding epp. js 217 KB JSeript Se.,. 2013-2-| 
S 2 名 STX 文件 ott 

畏 于 全 名 这 个 文件 3  ACP 文件 2013-4 
读 移 8 这 个 文件 4 EB Visual Bas 2011-1 
复制 这 个 文件 3 理 STX 文件 2011-1C 
全 将 这 个 文件 发 布 到 1 至 TNL 文档 2011-1- 
Web 1 KB NMPad Perl 2011-1- 

1 到 Javs 源 程 .，。 2011-1- 

1 三 HRL 文档 2013-4- 

地 打印 过往 件 tenplate. cpp 1 迎 C4+ 源 程序 2011-1- 
XX 3 这 个 文件 国 snippets. json 28 到 JS0N 文件 2013-2- 
SETUP3.LDG 1 至 文本 文档 2015-11 
EE 上 目 7 忆 | 
raby. acp 1 到 ACP 文件 2014-8- 

BB Free Files ee "i 











1-1-7 EditPlus 语法 文件 所 在 目录 界面 


(3) 修改 默认 HTML 模板 文件 。 进 入 EditPlus 软件 语法 文件 所 在 目录 ,用 EditPlus | 实 
软件 直接 打开 template. html, 然 后 进行 修改 ,完成 后 保存 并 关闭 软件 ,重新 启动 编辑 器 即 可 | 
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使 用 新 修改 的 HTML 模板 。 
(4) 自 定义 HTML 模板。 用 EditPlus 软件 编写 一 个 自 定 义 模板 , 取 名 为 “mytemplate. 
html”, 如 图 1-1-8 所 示 ,编辑 完成 后 保存 。 


去 |<= 
程序 名 称 ; | 
程序 功能 : 
设计 人 员 : 
设计 时 间 : 
--> 
<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="Generator" content="EditPlus®"> 
<meta name="Author" content=""> 
<meta name="Keywords" content=""> 
<meta name="Description" content=""> 
<title> </title> 
</head> 
<body> 
</body> 
</html>| 


1 
2 
3 
4 
5 
6 
7 
8 
9 


ri 
图 1-1-8 自 定义 HTML 模板 文件 界面 


从 菜单 栏 选择 Tools (工具 ) | Preferences (参数 ), 弹 出 Preferences (参数 ) 对 话 框 ,如 
图 1-1-9 所 示 。 
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<meta name= Description content= 
ctitloa、 /titla~、 





图 1-1-9 参数 设置 对 话 框 界面 


然后 选择 Categories( 类 别 ) 中 的 Templates( 模 板 ) ,右边 显示 系统 中 已 经 加 载 的 5 个 模 
板 , 单 击 Add( 添 加 ) 按 钮 ,输入 菜单 文本 “My HTML Page”, 单 击 右边 的 Open( 打 开 ) 按 钮 ， 
完成 模板 加 载 ,此 时 Templates 列表 中 自动 添加 “My HTML Page”, 如 图 1-1-10 所 示 ,然后 
单 击 OK 按钮 返回 主 界面 。 











(b) 
图 1-1-10 添加 HTML 模板 文件 界面 


从 菜单 栏 选 择 File|Nevw 菜单 后 ,可 在 其 右 侧 弹出 的 子 菜单 中 看 到 新 增加 的 自 定义 子 
菜单 一 一 My HTML Page. 如 图 1-1-11 所 示 ,说 明 自 定义 模板 加 载 成 功 , 即 可 使 用 。 使 用 自 
定义 模板 My HTML Page 新 建 HTML 文档 ,如 图 1-1-12 所 示 。 用 户 在 此 模板 的 基础 上 编 
写 Web 页 面 代码 ,以 后 根据 需要 可 以 随时 修改 此 模板 。 用 户 可 以 将 自己 的 学 号 、 姓 名 添加 
到 自 定义 模板 中 ,完成 个 性 化 模板 的 设计 。 
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mplate. htal 一 EditPlus 


设计 时 间 : | 
--> 
<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 





1-1-11 My HTML Page 模 板 界面 


Vntitled5. htal #* 


S |E ~ 
坷 

<!-- 
程序 名 称 : | 
程序 功能 : 
设计 人 员 : 
设计 时 间 : 

--> 

<!doctype html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
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4 
5 
6 
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图 1-1-12 利用 My HTML Page 模板 新 建文 档 





项 目 4 meta 标记 、body 标记 属性 使 用 


1. 实 训 要 求 

(1) 掌握 meta 标记 及 body 标记 常用 属性 设置 方法 。 
(2) 学 会 使 用 meta 标记 属性 设置 网 页 属性 。 

(3) 掌握 多 种 颜色 的 设置 方法 。 

(4) 学 会 使 用 body 标记 属性 设置 网 页 。 


2. 实 训 内 容 

(1) 使 用 meta 标记 属性 设置 网 页 属性 。 

(2) 设置 网 页 背景 颜色 和 前 景 颜色 。 

(3) 使 用 自 定义 HTML 模板 编写 HTML 文档 。 
(4) 使 用 各 种 颜色 表示 法 设置 各 类 颜色 。 

3. 实 训 所 需 知识 点 

(1) 元 信息 meta 标记 

<meta charset = "UTF 一 8"> 

<meta name = "Generator" content = "EditPlus@@"> 
<meta name = "Author" content = "Web 前 端 开 发 工程 师 "> 
<meta name = "Keywords" content = "Web 前 端 开 发 ,网 页 设计 "> 


<meta name = "Description" content = "初学 者 网 站 ,实验 家 园 "> 
<meta http - equiv = "content 一 type”content = ""> 


(2) 主体 body 标记 


<body bgcolor = "" text= "" link="" alink="" vlink="" > …</body> 


注 : 颜色 设置 方法 有 RGB 函数 (整数 .百分比 )、 十 六 进 制 表示 法 (6 位 、3 位 )、 颜 色 英 文 
名 称 。 
(3) 标题 字 h2 标记 


< h2 align = "center"> …</h2 > 


(4) 超 链 接 a 标记 


<a href = "http://www. firefox. com. cn/"> 火 狐 官 方 中 文 网 站 </a> 


(5) 水 平分 隔 线 hr 标记 


<hr size= "" width= "" align=""color=""> 


4. 实 训 过 程 与 指导 

编程 实现 如 图 1-1-13 所 示 的 页 面 , 具 体 步 骤 如 下 : 

(1) 启动 EditPlus 或 HBuilder 等 软件 ,通过 自 定 义 模板 My HTML Page 建立 prj_1_4. 
html 文档 。 

(2) 参照 meta 标记 的 定义 ,学 会 设置 meta 标记 的 Keywords、Description、Generator、 
Author 等 属性 。 

(3) 定义 body 标记 的 bgcolor、 background、 text、 link、 alink、vlink、topmargin、 
leftmargin 等 属性 ,实现 页 面前 景 颜色 .背景 颜色 .背景 图 像 和 超 链 接 的 颜色 变化 ,注意 同时 





设置 bgcolor、 background 属性 时 页 面 效果 的 变化 。 使 用 5 种 方法 设置 各 类 颜色 ,代码 和 
如 下 : 1 





Web 前 再 开发 球 壤 配置 与 日 TML 基础 


Web 前 给 开发 扶 术 实验 与 实践 一 HTML5、CSS3、JavaScript( 第 3 版 》 





<body bgcolor = "#EEFFFF" text =rgb(50%,50%,50%) link="#FF0066" vlink = "red" alink = 
"#6F0"> 


(4) 在 body 标记 中 插入 段落 p 标记 ,段落 的 内 容 如 下 : 


Mozilla Firefox 是 由 Mozilla 基金 会 与 开源 团体 共同 开发 的 网 页 浏览 器 。Firefox 28 全 新 发 布 ,从 
火狐 官方 中 文 网 站 上 下 载 最 新 版 Firefox 火狐 浏览 器 ,拥有 最 快 .最 安全 的 上 网 体验 。 


(5) 在 段落 首部 插入 4 个 空格 ,设置 “火狐 官方 中 文 网 站 ” 超 链接 。 格 式 如 下 : 
<a href = "http://firefox.com.cn/"> 火 狐 官方 中 文 网 站 </a> 


(6) 完成 代码 设计 后 ,通过 查看 网 页 ,观看 页 面 效果 ,如 图 1-1-13 所 示 。 


c IO 127.0.0.1:8020/ 实 训 1- 代 三 /prj_1_4.html?_hbt=1501804745025 


meta 标 记 、body 标 记 属性 应 用 





Mozilla Firefox 是 由 Mozilla 基 金 会 与 开源 团体 共同 开发 的 网 页 浏览 器 。Firefox 28 全 新 发 布 ， 从 火狐 官方 中 文 网 站 上 下 载 
最 新 版 Firefox 火狐 浏览 路， 拥有 最 快 、 最 安全 的 上 网 体验 。 





1-1-13 ”meta 和 body 标记 属性 应 用 页 面 效果 图 


项 目 5 _ HTML CSS JavaScript 综合 编程 


1. 实 训 要 求 

(1) 掌握 HTML .CSS JavaScript 三 大 技术 在 网 页 设计 中 的 作用 。 
(2) 学 会 使 用 p、h2、hr、script 等 基本 的 HTML 标记 设计 页 面 内 容 。 
(3) 学 会 使 用 简单 的 CSS 样式 控制 标题 和 段落 的 显示 效果 。 

(4) 学 会 使 用 告警 消息 框 alert() 输 出 对 话 框 。 

2. 实 训 内 容 

(1) 采用 CSS 对 h2、p 标记 样式 进行 重新 定义 。 

(2) 采用 script 标记 为 页 面 添加 JavaScript 代码 。 

(3) 使 用 告警 消息 框 弹出 窗口 与 用 户 进行 交互 。 

3. 实 训 所 需 知识 点 

(1) 样式 style 标记 


< style type = "text/css"> 
h2{ 
font - family: 微 软 雅 黑 ; /* 定义 字体 名 称 * / 
font — size:8px; /* 定义 字 体 大 小 */ 


color:red; /* 定 义 字 显示 的 颜色 */} 
p{ 
text — indent :2em; /* 定 义 首 行 缩 进 2 个 字符 */ 
font — size:18px; /x* 定义 字 体 大 小 x* /} 
</style> 


在 style 标记 中 重新 定义 h2 标记 样式 。 
(2) 脚本 script 标记 
< script type = "text/javascript"> 


alert("Web 前 端 开发 工程 师 就 业 前 景 好 、 薪 酬 高 ! "); 
</script > 


在 script 标记 中 使 用 告警 消息 框 alert(" 内 容 ") 来 输出 信息 ,格式 如 下 所 示 : 
alert(" 输 入 消息 内 容 "); 

(3) 标题 字 h2 标记 

<h2>Web 前 端 开发 岗位 介绍 </h2 > 

(4) 水 平分 隔 线 hr 标记 

< hr color = "#33cc66"> 

(5) 段落 p 标记 

<p align = "center"> Web 前 端 开发 工程 师 的 岗位 职责 …</p> 


4. 实 训 过 程 与 指导 

编程 实现 如 图 1-1-14 所 示 的 页 面 。 具 体 步 骤 如 下 : 

(1) 启动 EditPlus 或 HBuilder 等 软件 ,通过 自 定义 模板 My HTML Page 建立 prj_1_5. 
html 文档 。 
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Web 前 端 开发 岗位 介绍 





Web 前 端 开发 工程 师 的 岗位 职责 1) 协助 系统 架构 设计 师 进行 系统 架构 设计 工作 (2) 承担 Web 前 端 核心 模块 的 设 
计 、 实 现 工作 : (3) 承 担 主 要 开发 工作 ， 对 代码 质量 及 进度 负责 ;(4) 参 与 进行 关键 技术 验证 以 及 技术 选 型 工作 ; (5) 与 产 
品 经 理 沟通 并 确定 产品 开发 需求 。 xzoae 
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1-1-14 三 种 技术 组 合 编程 实现 的 效果 图 
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(2) 在 head 标记 中 插入 style 标记 ,在 style 标记 中 定义 h2、p 标记 样式 ,格式 参见 
“3. 实 训 所 需 知 识 点 ?中 的 样式 style 标记 的 定义 。 
(3) 在 body 标记 中 插入 h2 标记 ,标记 的 内 容 为 “Web 前 端 开发 岗位 介绍 ”。 
(4) 在 body 标记 中 插入 hr 标记 ,设置 color 属性 值 为 "#33cc66"。 
(5) 在 body 标记 中 插入 p 标记 ,并 为 p 标记 添加 内 容 。 其 内 容 如 下 : 
Web 前 端 开发 工程 师 的 岗位 职责 :@ 协 助 系统 架构 设计 师 进行 系统 架构 设计 工作 ; @ 承 担 Web 前 


端 核心 模块 的 设计 、 实 现 工 作 ; @@ 承 担 主要 开发 工作 ,对 代码 质量 及 进度 负责 ; @@ 参 与 进行 关键 技术 
验证 以 及 技术 选 型 工作 ; @ 与 产品 经 理 沟通 并 确定 产品 开发 需求 。 


(6) 在 body 标记 中 插入 script 标记 ,在 script 标记 内 插入 alert(“Web 前 端 开发 工程 师 
就 业 前 景 好 、 薪 酬 高 1”) ,输出 信息 。 
(7) 完成 代码 设计 后 ,通过 查看 网 页 ,观看 页 面 效果 。 


课外 拓展 训练 1 


1. 设计 简易 Web 页 面 ,效果 如 图 1-1-15 所 示 。 要 求 如 下 : 

(1) 标题 : h3 .hr、p 等 标记 的 应 用 。 

(2) meta 标记 至 少 设置 2 个 属性 值 对 。 

(3) 标题 居中 对 齐 .段落 首 行 缩 进 2 个 字符 ,水 平分 隔 线 为 粉红 色 , 页 面 内 容 如 图 1-1-15 
所 示 。 


cc | © 127.0.0.1:8020/ 空 训 1- 代 码 /project_1_1.html?_hbt=1501805284864 





meta、h3、hr、p 等 标记 的 应 用 


HTML 标 准 自 1999 年 12 月 发 布 的 HTML 4.01 后 , 后 继 的 HTML5 和 其 他 标准 被 束之高阁 ， 为 了 推动 Web 标 准 化 运动 的 发 
展 ， 一 些 公司 联合 起 来 ， 成 立 了 一 个 叫 作 Web Hypertext Application Technology Working Group 〈 Web 超 文本 应 用 技术 中 
工作 组 , WHATWG ) 的 组 织 。 





图 1-1-15 meta、h3.,hr、p 等 标记 的 应 用 
参考 样式 如 下 ,并 将 其 插入 到 head 标记 中 。 


< style type = "text/css"> 
p{text - indent: 2em; /* 首 行 缩 进 2 个 字符 * /} 
</style> 


2. 按 如 下 要 求 设计 Web 页 面 ,如 图 1-1-16 所 示 。 要 求 如 下 : 

(1) 标题 : body 属性 及 注释 标记 的 应 用 。 

(2) 功能 : 利用 CSS 和 body 属性 设计 彩色 页 面 ; 页 面 文字 颜色 为 白色 ,背景 为 
井 6633ff, 顶 部 边界 .左边 边界 均 为 50px; 两 条 分 隔 线 颜色 分 别 为 并 00ff00、##fft0066 。 

(3) CSS 样式 表 定 义 : 段落 p 标记 样式 , 首 行 缩 进 2 个 字符 (text-indent:2em) ;图 层 div 


样式 , 边 粗 细 为 1px、 线 型 为 点 画 线 .颜色 为 并 660033 。 
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图 1-1-16 body 属性 注释 标记 的 应 用 
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实 训 2 格式 化 文本 、 段 落 与 列表 





【 实 训 目标 】 

(1) 掌握 标题 字 、 文 本 标记 、 段 落 与 排版 标记 的 语法 。 
(2) 了 解 列表 基本 类 型 ,掌握 无 序列 表 、 有 序列 表 、 定 义 列表 的 语法 并 学 会 使 用 。 
(3) 掌握 文字 段落 排版 的 基本 规则 。 

(4) 能 够 完成 文本 型 Web 网 页 的 设计 。 

【 实 训 内 容 】 

(1) 标题 字 标 记 、 文 本 标记 、 段 落 与 排版 标记 的 应 用 。 
(2) 无 序列 表 标 记 、 属 性 设置 与 应 用 。 

(3) 有 序列 表 标记 、 属 性 设置 与 应 用 。 

(4) 自 定义 列表 标记 、 属 性 设置 与 应 用 。 

【 实 训 项 目 】 

(1) 文本 与 段落 标记 的 应 用 。 

(2) 高 校 资讯 新 闻 条 目 设 计 。 

(3) 设计 制度 宣传 展板 。 

(4) 设计 饭店 菜单 价目 表 。 


项 目 6 文本 与 段落 标记 的 应 用 


1. 实 训 要 求 

(1) 对 网 页 中 的 文本 进行 格式 化 。 
(2) 对 网 页 中 的 段落 进行 格式 化 。 
2. 实 训 内 容 

(1) 标题 字 的 使 用 。 

(2) 两 种 注释 方式 的 使 用 。 

(3) 字体 标记 的 应 用 。 

(4) 文本 、 段 落 标记 及 其 属性 的 应 用 。 
3. 实 训 所 需 知 识 点 

(1) 标题 字 hl 一 h6 标记 


<hl align = "left | center | right | justify " >…</hl> 


标题 字 标记 < h2 > 一 < h6 > 与 hl 标记 属性 相同 。 
(2) 段落 p 标记 


<palign=" left | center | right | justify ">…</p> 


(3) 换行 br 标记 
<br> <! -- 插入 单个 折 行 (换行 ) --> 


(4) 字体 font 标记 


<font face=" " size= " " color = " "> 文字 </font> 
(5) 空格 与 特殊 符号 
向 网 页 中 添加 空格 和 特殊 符号 可 以 使 用 & 符号 加 上 相应 的 英文 单词 的 缩写 ,以 分 号 结 


东 , 如 “&copy; ”表示 版 权 @,“&nbsp;” 表 示 空 格 等 。 
(6) 水 平分 隔 线 hr 标记 


<hr align = "center " color = "#334455 " width= "80% " size= "3"> 
(7) 注释 comment 标记 


<! -- 注释 内 容 一 > 
<comment > 注释 内 容 </comment > <! -- 尽量 不 使 用 此 种 方式 ,其 他 浏览 器 会 显示 出 来 --> 


(8) 文本 标记 
在 EditPlus v4. 30 和 Adobe Dreamweaver CS6 等 高 版 本 软件 的 HTML 工具 栏 中 的 
B、I 等 文本 标记 已 经 更 新 了 ,如 图 1-2-1 所 示 。 标 记 语 法 说 明 如 下 : 
HTML 工 具 栏 


<meta name="Description" 
content=""> 
<title> </title> 
</head> 
<body> 
<strong> 标 准 粗 体 </strong> 
<em> 斜 体 </em> 
tn </body> 
前 辽 开 发 环 培 配 轨 刁 w 到 | 34 </html> 











图 1-2-1 EditPlus 软件 中 文本 标记 定义 
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< strong > 表示 重要 </strong> <! -- 蔡 代 原来 的 <b></b> --> 





< em> 表 示 强 调 </em> <! -- 蔡 代 原来 的 <i></i> --> 
<u> 下 夯 线 </u> 

< del > 表示 删除 线 </del > 

< sup > 上 标 </sup> <! -- HW--> 

< sub > 下 标 </sub> <! -- -> 


<address> 地 址 :江苏 省 南京 市 北京 路 20 号 </address> 


(9) 预 格式 (已 编排 格式 )pre 标记 


< pre > 预 设 格式 </pre> 


pre 标记 在 EditPlus 软件 中 称 为 “ 预 设 格式 ?标记 ; 在 Dreamweaver 中 称 为 “已 编排 格 
式 ” 标 记 ; 在 HTML 教程 中 称 为 “ 预 格式 文本 ”标记 ,其 实 都 是 一 回 事 。 
(10) 块 引 用 blockquote 标记 


< blockquote> 块 引用 </blockquote> <! -- 向 右 缩 进 5 个 西方 字符 位 置 --> 


4. 实 训 过 程 与 指导 

编程 实现 如 图 1-2-2 所 示 的 页 面 , 页 面 分 为 4 个 部 分 ,分 别 使 用 水 平分 隔 线 分 隔 ,具体 
步骤 如 下 : 

第 一 部 分 :“1. 标题 字 应 用 ” 

(1) 启动 EditPlus 或 HBuilder 软件 ,新 建 HTML 网 页 ,在 首 行 插入 注释 语句 : <!-- prj_ 
2_1. html -->, 注 明 程序 名 称 为 prj_2_1. html。 

















DD 相 式 化 文本 信息 
C [filey//E/ 清 华 社 -规划 数 材 - 交 验 数 材 秆 3 版 资源 及 代码 20170526/ 交 训 2/ 妆 训 2- 代 三 /prj_2_1html 
【1 标题 字 应 用 】 | 


软件 工程 是 全 国 就 业 薪酬 涨幅 最 大 的 专业 





【2 甩 邯 、 字 体 标记 应 用 】 
网 页 的 本 质 就 是 超级 文 李 标 记 语言 ， 通 过 结合 使 用 其 他 的 Web 技 术 (如 : 脚本 语言 、 公 半 网 关 按 口 、 组 件 等 ) ， 可 以 创造 出 功 
能 强大 的 网 页 。 
【3 文本 标记 应 用 ] 
,3x=9 AID 
地 姑 ;洒洒 庆功 深 洒 世 1924 和 








臣 奴 文本 标记 于 二 下 的 一 个 二 用 ， 一 种 标准 , 它 通过 标记 符号 来 标记 要 显示 的 网 页 中 的 各 个 部 分 。 网 页 文件 本 身 是 一 种 文本 文件 ,通过 在 文本 文件 
中 请 bo 村 符 ， ET 文 二 00 同好 理 , 本 各 向 雪 挫 ,图片 各 阿 时 趣 等 ) - 





独处 秦 地 的 思 妇 前 景 生 情 ， 终 日 思念 远 在 燕 地 卫 成 的 夫君 ， 
怀 已 ， 此 时 素 亲 已 低 ， 寿 已 新 新 ， 进 一 层 来 达 了 思 妇 之 情 。 五 


由 开头 两 名 生 必 而 
、 六 两 句 ， 以 天 风 玉 鸯 时 ， a “来 表现 她 对 爱情 让 上 请 吾 。 Er 要 访 动人。 
































1-2-2 其 他 排版 标记 应 用 效果 图 


(2) 在 head 标记 中 插入 title 标记 ,内 容 为 “格式 化 文本 信息 ”。 

(3) 在 body 标记 中 插入 注释 语句 ,内 容 为 “1. 标题 字 应 用 ”, 然 后 使 用 < strong > 
</strong > 标记 ,定义 小 标题 ,内 容 为 “1. 标题 字 应 用 ”。 

(4) 在 body 标记 中 分 别 插入 1、4、5 号 标题 字 标记 ,并 应 用 属性 实现 居中 、 居 左 、 居 右 对 
齐 。 标 题字 的 内 容 均 为 “软件 工程 是 全 国 就 业 薪 酬 涨幅 最 大 的 专业 ”。 

(5) 在 body 标记 中 插入 一 条 颜色 为 #ft3333 的 水 平分 隔 线 标记 。 

第 二 部 分 :“2. 段落 .字体 标记 应 用 ” 

(6) 在 body 标记 中 插入 < strong ></strong > 标记 ,定义 小 标题 ,内 容 为 “2. 段落 .字体 
标记 应 用 ”。 再 插入 注释 语句 ,内 容 为 “2. 段落 .字体 标记 应 用 ”。 

(7) 在 body 标记 中 插入 段落 标记 ,对 段落 内 容 进 行 字体 控制 ,样式 :“ 字 体 隶 书 、 大 小 
5、 颜 色 blue”, 并 在 段 首 插入 4 个 空格 。 段 落 的 内 容 如 下 : 


网 页 的 本 质 就 是 超级 文本 标记 语言 ,通过 结合 使 用 其 他 的 Web 技术 (如 脚本 语言 .公共 网 关 接 口 .组件 
等 ), 可 以 创造 出 功能 强大 的 网 页 。 


第 三 部 分 :“3. 文本 标记 应 用 ” 

(8) 在 body 标记 中 插入 < strong ></strong > 标记 ,定义 小 标题 ,内 容 为 “3. 文本 标记 应 
用 ”。 再 插入 注释 语句 ,内 容 为 “3. 文本 标记 应 用 ”。 

(9) 在 body 标记 中 插入 上 标 `, 下 标 和 地 址 标记 完成 页 面 内 容 的 设置 ,并 实现 前 两 行内 
容 居 中 显示 。 后 三 行内 容 采 用 块 缩 进 ( 块 引用 ) 标 记 。 具 体内 容 如 下 : 


2X +3x=9 x1+x2=10 
地 址 : 江苏 省 两 京 市 珠江 和 够 1924 号 

超级 文本 标记 语言 是 标准 通用 标记 语言 下 的 一 个 应 用 ,也 是 一 种 规范 ,一 种 标准 , 它 通过 标记 符 
号 来 标记 要 显示 的 网 页 中 的 各 个 部 分 。 网 页 文件 本 身 是 一 种 文本 文件 ,通过 在 文本 文件 中 添加 标记 
符 , 可 以 告诉 浏览 器 如 何 显示 其 中 的 内 容 (如 文字 如 何 处 理 .画面 如 何 安排 ,图片 如 何 显示 等 ) 。 


第 四 部 分 :“4. 其 他 排版 标记 应 用 ” 

(10) 在 body 标记 中 插入 < strong ></strong > 标记 ,定义 小 标题 ,内 容 为 “4. 其 他 排版 
标记 应 用 ”。 

(11) 在 body 标 记 中 插入 预 设 格式 标记 ,内 容 为 一 首 诗 等 。 采 用 font 标记 设置 字体 大 
小 及 颜色 。 其 中 诗 标题 字体 大 小 为 7, 作 者 和 内 容 信 息 字 体 大 小 为 5。 内 容 如 下 : 


《 春 思 》 
李白 
燕 草 如 碧 丝 , 秦 桑 低 绿 枝 。 
当 君 怀 归 日 ,是 妾 断肠 时 。 
春风 不 相识 ,何事 入 罗 帽 ? 
【评析 ]: 这 是 一 首 描写 思 妇 心绪 的 许 。 开 头 两 句 以 相隔 遥远 的 燕 秦 春天 景物 起 兴 , 写 独处 秦 地 
的 思 妇 触 景 生 情 , 终 日 思念 远 在 燕 地 卫 成 的 夫君 ,盼望 他 早日 归来 。 三 、 四 句 由 开头 两 句 生发 而 来 ， 
继续 写 燕 草 方 怕 , 夫 君 必定 思 归 怀 己 ,此 时 秦 桑 已 低 , 妾 已 断肠 , 进 一 层 表达 了 思 妇 之 情 。 五 ,六 两 
句 ,以 春风 掀 动 罗 帽 时 , 思 妇 的 心理 活动 来 表现 她 对 爱情 坚贞 不 二 的 高 尚 情 操 。 
全 诗 以 景 寄情 ,委婉 动人 。 
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(12) 在 body 标记 中 插入 一 条 “颜色 为 #ff00ff、 大 小 为 3 的 水 平分 隔 线 标记 。 
(13) 完成 代码 设计 后 ,通过 查看 网 页 ,观看 页 面 效 果 。 


项 目 7 高 校 资 讯 新 闻 条 目 设计 


1. 实 训 要 求 
利用 无 序列 表 设 计 “ 中 国教 育 和 科研 计算 机 网 ”主页 中 的 “高 校 资 讯 " 新 闻 条 目 , 新 闻 条 
目 效 果 如 图 1-2-3 所 示 。 


科研 发 展 


本 到 二 | 科技 前 沿 | 成 果 展示 | 学术 全 议 


， 国 防 科技 大 学 员 问 加 2014 国 B+ 数 模 竞 赛 最 高 奖 
， 同 齐 大 学 教授 阮 仪 三 获 2014 享 利 - 稚 普 -里 德 奖 
* 中 科大 徐 春 叶 教授 获 2014 年 国际 村 料 科 学 奖 
"北京 策 家 医院 肺 交 诊 疗 会 诊 中 心 成 立 

“兰州 大 学 博士 生 获 全 国 优秀 博士 学 位 论文 提名 


图 1-2-3 原 网 站 部 分 新 闻 版 块 截图 
2. 实 训 内 容 
(1) 无 序列 表 的 应 用 。 
(2) 样式 表 的 定义 与 引用 。 
(3) 有 段落、 图 层 标 记 及 属性 的 应 用 。 
3. 实 训 所 需 知识 点 
(1) 无 序列 表 ul 标记 
<ul type= "disc"> 
<1i type = ""> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 


</ul> 

(2) 图 层 div 标记 
<div class = "div1">…</div> 
(3) 样式 styles 标记 


<style type = "text/css"> 


.bt{font ~ size:22px; /x* 设置 字体 大 小 * / 
font - family: 黑 体 ; /x* 设置 字体 系列 * / 
margin:0 auto; /* 设置 边界 ,上 下 为 0 左右 为 自动 */ 
padding:0 20px; /* 设置 填充 , 上 下 为 0, 左右 为 20px * /} 
.divl{width:530px; /* 设置 宽度 */ 


height :280px; /* 设置 高 度 * / 


border:1px solid # ccff99; /x 设置 边框 样式 ,粗细 为 1px、 实 线 、 颜 色 为 # ccff99 x /} 


ul{list— style— type:disc; /x* 设置 列表 符号 类 型 ,默认 值 * / 
line — height :33px; /x* 设置 行 高 * / 
color:blue; /x 设置 颜色 */ } 
h2{font - size:32px; /x* 设置 字体 大 小 */ 
background: # ebebeb; /* 设置 背景 颜色 */ 
color: #000099; /* 设置 前 景 颜 色 */ 
margin:0 auto 10px auto; /* 设置 边界 ,上 、 右 \ 下 、 左 边界 值 */} 
</style> 


(4) 标题 字 h2 标记 


< h2 > 科研 发 展 </h2 > 


4. 样式 的 应 用 
(1) 图 层 样式 应 用 


<div class= "divl" id= "">…</div> 


注 : 使 用 开始 符 为 “.”( 点 号 ) 的 样式 是 类 样式 ,引用 时 使 用 标记 的 class 属性 。 使 用 开 
始 符 为 “ 井 ” 的 样式 是 id 样式 ,引用 时 使 用 标记 的 id 属性 。 
(2) 首 行 段落 样式 应 用 


<p class = "bt">…</p> 


5. 实 训 过 程 与 指导 
编程 实现 如 图 1-2-4 所 示 的 页 面 ,具体 步骤 如 下 : 





C | O fileV//E/ 清 华 社 -规划 教材 -实验 教材 第 3 版 资源 及 代码 201.， 女 | : 





科研 发 展 


高 校 资讯 科技 前 沿 成 果 展 示 学 术 会 议 


。 国防 科技 大 学 问 昂 2014 国 际 数 模 竞 赛 最 高 

。 同济 大 学 教授 阮 仪 三 获 2014 享 利 * 霍 普 " 里 德 奖 

。 中 科大 徐 春 叶 教授 获 2014 年 国际 材料 科学 奖 

。 北京 和 睦 家 医院 肺癌 诊疗 会 诊 中 心 成 立 
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图 1-2-4 用 无 序列 表 实 现 新 闻 版 块 效果 


(1) 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程 序 名 称 为 prj_2_2. html。 格 式 如 下 : 





NM 
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<!1 —— prj 2 2.html -一 > 


(2) 编辑 主体 内 容 。 在 body 标记 中 插入 div 标记 (从 HTML 工具 栏 中 选择 div 标记 图 
标 ) ,在 div 标记 中 分 别 插入 下 列 标记 : 

@ 插入 标题 字 h2 标记 ,内 容 为 “科研 发 展 ”。 

@ 插入 段落 标记 ,内 容 为 “高 校 资讯 ”科技 前 沿 ”成 果 展 示 “学 术 会 议 ”。 

@ 插入 无 序列 表 ul 标记 ,依次 添加 列表 项 。 列 表 项 的 内 容 如 下 : 


国防 科技 大 学 问鼎 2014 国际 数 模 竞 赛 最 高 奖 
同济 大 学 教授 阮 仪 三 获 2014 享 利 ` 霍 普 ` 里 德 奖 
中 科大 徐 春 叶 教 授 获 2014 年 国际 材料 科学 奖 
北京 和 睦 家 医院 肺癌 诊疗 会 诊 中 心 成 立 

兰州 大 学 博士 生 获 全 国 优秀 博士 学 位 论文 提名 


编辑 完 后 ,保存 HTML 文档 ,并 通过 浏览 器 查看 网 页 效果 ,如 图 1-2-5 所 示 。 
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科研 发 展 
高 校 资讯 科技 前 沿 成 果 展 示 学 术 会 议 


国防 科技 大 学 问 申 2014 国 际 数 模 竞赛 最 高 奖 

同济 大 学 教授 阮 仪 三 获 2014 享 利 。 翟 普 。 里 德 奖 
中 科大 徐 春 叶 教授 获 2014 年 国际 材料 科学 奖 
北京 和 睦 家 医院 肺癌 诊疗 会 诊 中 心 成 立 
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图 1-2-5 新 闻 版 块 初始 效果 (无 样式 ) 


(3) 定义 样式 。 在 head 标记 中 插入 style 标记 ,在 style 标记 中 分 别 定义 bt、divl 两 个 
类 样式 ,ul、h2 两 个 标记 样式 ,分 别 如 下 : 


.bt{font - size:22px; font - family: 黑 体 ;margin:0 auto;padding:0 20px;} 
.divi{width:530px; height:280px; border:1px solid #ccff99;} 

ul{list— style— type:disc;font ~ size:22px; line — height:33px;color:blue;} 
h2{font - size:32px;background: # ebebeb;color: #000099;margin:0 auto 10px auto;} 


(4) 引用 样式 。 在 body 标记 中 分 别 给 div、p 等 标记 引用 样式 ,格式 分 别 如 下 : 


<div class = "div1"> 


<p class = "bt"> 高 校 资 讯 科技 前 沿 成 果 展 示 学 术 会 议 </p> 
</div> 


(5) 保存 并 浏览 网 页 。 完 成 代码 设计 后 ,通过 浏览 器 (或 在 EditPlus 软件 中 按 Ctrl 十 B 
组 合 键 ) 查 看 网 页 ,观看 最 终 的 页 面 效果 ,如 图 1-2-4 所 示 。 


项 目 8 设计 制度 宣传 展板 


1. 实 训 要 求 
(1) 利用 有 序列 表 标 记 制 作 ( 大 型 分 析 仪器 管理 办 法 ) 制 度 宣传 展板 。 


(2) 使 用 相关 标记 实现 管理 办 法 标题 居中 显示 ,制度 以 条 目 化 方式 有 序 显示 ,序号 为 数 
字 序 列 。 


(3) 学 会 使 用 < p>、< div >、< ol > 等 标记 实现 页 面 效果 。 
2. 实 训 内 容 
(1) 有 序列 表 的 应 用 。 
(2) 样式 表 的 定义 与 引用 。 
(3) 段落 .图 层 等 标记 的 应 用 。 
3. 实 训 所 需 知 识 点 
(1) 有 序列 表 ol 标记 
< ol type= "A" start= "3"> 
<1i type= "1" value = "5"> 列 表 项 </1i> 
<1itype="" value= ""> 列 表 项 </1i> 


<1i type= "" value= ""> 列 表 项 </1i> 
</ol> 


(2) 段落 p 标记 

<pP>…</p> 

(3) 图 层 div 标记 

<div class= "divl" >…</div> 
(4) 样式 style 标记 


< style type = "text/css"> 
body{ text - align:center; /* 设置 文本 居中 对 齐 方式 * / 


font ~ size:20px; 
font ~ weight :bold; 


设置 字体 大 小 */ 
设置 字体 标准 粗 体 * /} 


hi{font - size:32px; /* 设置 字体 大 小 * / 

font - family: 黑 体 ; /* 设置 字体 系列 * / 
height :62px; /x* 设置 高 度 */ 
padding - top:15px; /x* 设置 顶部 填充 * / 
text - align:center; /* 设置 文本 居中 对 齐 * / 
color:white; /x* 设置 颜色 * / 
background: # 9999ff; /* 设置 背景 颜色 */} 

.divl{width:650px; /x* 设置 宽度 * / 
height :940px; /x 设置 高 度 * / 
text - align: left; /x* 设置 文本 居 左 对 齐 * / 
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padding:50px; /* 设置 填充 x / 
background:url("prj_image2 2. jpg") ;/* 设置 背景 图 像 * / 
letter — spacing:1px; /* 设置 字符 间距 * /} 
</style> 


在 style 标记 中 定义 段落 p 标记 样式 和 图 层 divl 的 样式 。 
4. 实 训 过 程 与 指导 
编程 实现 制度 宣传 展板 页 面 ,效果 如 图 1-2-6 所 示 ,具体 步骤 如 下 : 














图 1-2-6 《大 型 分 析 仪 器 管理 办 法 ) 最 终 效果 图 


(1) 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程序 名 称 为 prj_2_3. html, 格 式 如 下 : 


<!-- prj 2 3.htnl --> 


(2) 设计 网 页 初步 效果 。 在 body 标记 中 插入 图 层 div, 定 义 图 层 的 class 属性 值 为 "div1”。 
(3) 在 div 标记 中 插入 hl 标题 字 标记 ,居中 显示 ,内容 为 "大 型 分 析 仪器 管理 办 法 ”。 


(4) 在 div 标记 中 插入 有 序列 表 ol 标记 ,type 属性 和 start 属性 的 值 均 设置 为 *1”。 
(5) 在 ol 标记 中 插入 10 个 1 标记 ,并 添加 列表 项 的 内 容 , 列 表 项 的 内 容 分 别 如 下 : 


大 型 仪器 必须 由 专人 保管 , 须 配 有 稳 压 电源 ,使 用 前 须 先 检查 仪器 间 各 电路 连接 情况 , 再 开 稳 压 电源 , 
然后 再 启动 仪器 开关 。 

必须 严格 执行 仪器 设备 运行 记录 制度 , 记录 仪器 运行 状况 、 开 关机 时 间 。 凡 不 及 时 记录 者 ,一 经 发 现 ， 
停止 使 用 资格 一 周 。 

使 用 仪器 必须 熟悉 本 仪器 的 性 能 和 操作 方法 ,本科 生 作 毕 业 论文 使 用 时 应 有 教师 在 场 ,熟悉 操作 使 用 
后 必须 经 有 关 教 师 和 实验 人 员 同 意 方 可 进行 独立 操作 。 

仪器 使 用 完毕 ,必须 将 各 使 用 器 件 擦 洗 干净 归还 原 处 , 盖 上 防 侍 单 ,关闭 电源 ,打扫 完 室内 , 方 可 
离开 。 

下 次 使 用 者 ,在 开机 前 ,首先 检查 仪器 是 否 清洁 卫生 、 是 否 有 损坏 , 接 通 电源 后 , 检查 是 否 运转 正常 。 
发 现 问题 及 时 报告 管理 员 , 并 找 上 一 次 使 用 者 问 明 情 况 , 知 情 不 报 者 追查 当 次 使 用 者 责任 。 

若 在 操作 使 用 期 间 出 现 故 障 , 应 及 时 关闭 电源 ,并 向 有 关 管 理 人 员 报 告 ,严禁 擅自 处 理 、 拆 印 .调整 仪 
器 主要 部 件 , 凡 自行 拆卸 者 一 经 发 现 将 给 予 严 重 处 罚 。 用 后 切断 电源 \ 水 源 ,各 种 按钮 回 到 原 位 ,并 做 好 清 
洁 工作 、 锁 好 门窗 。 

所 有 仪器 设备 的 操作 手册 及 技术 资料 原件 一 律 建 档 保存 , 随 仪器 使 用 的 只 能 是 复印 件 。 

保持 仪器 清洁 ,仪器 的 放置 要 远离 强酸 、 强 碱 等 腐蚀 性 物品 ,远离 水 源 、 火 源 、 气 源 等 不 安全 源 。 

各 仪器 要 根据 其 保养 ,维护 要 求 , 进行 及 时 或 定期 的 干燥 处 理 、 充 电 维 护 、 校 验 等 ,确保 仪器 正常 运 
转 。 每 学 期 进行 一 次 仪器 使 用 检查 ,发现 有 损坏 应 及 时 请 有 关 部 门 维修 。 

仪器 不 能 随意 搬 动 , 更 不 能 借 给 外 单位 使 用 ; 校内 人 员 经 实验 室 主 任 批准 后 可 在 实验 室 按 上 述 规定 
使 用 。 


(6) 在 div 标记 中 插入 h3 标题 字 标记 ,并 设置 “ 居 右 ”显示 。 内 容 为 "大 型 仪器 管理 办 公 
室 ”。 编 辑 完 后 ,保存 HTML 文档 ,并 通过 浏览 器 查看 网 页 效果 ,如 图 1-2-7 所 示 。 


“I 


C | @ fileVWE:/ 清 华 社 -规划 教材 -实验 教材 第 3 版 资源 及 代码 20170526/ 实 训 2/ 实 训 2- 代 码 /prj_2_3.html 


大 型 分 析 仪 器 管理 办 法 


1 大 型 仪器 必须 由 专人 保管 ， 须 配 有 稳 压 电源 ,使 用 前 须 先 检查 仪器 间 各 电路 连接 情况 ， 再 开 稳 压 电源 ， 然 后 再 启动 



















2 必须 严格 执行 仪器 设备 运行 记录 制度 ,记录 仪器 运行 状况 、 开 关机 时 间 。 凡 不 及 时 记录 者 ， 一 经 发 现 ， 停 止 使 用 资 “| 
格 一 周 


3 使 用 仪器 必须 熟悉 本 仪器 的 性 能 和 操作 方法 ， 本 科 生 作 毕 业 论 文 使 用 时 应 有 教师 在 场 ， 熟 悉 操 作 使 用 后 必须 经 有 关 
教师 和 实验 人 员 同 意 方 可 进行 独立 操作 。 

4 . 仪器 使 用 充 毕 ， 必 须 将 各 使 用 器 件 擦洗 干净 归还 原 处 ， 盖 上 防 尘 二 ， 关闭 电 源 ,打扫 完 诗 内 , 方 可 高 开 。 

5. 下 次 使 用 者 ， 在 开机 前 ， 首 先 检查 仪器 是 否 清洁 卫生 、 是 否 有 损坏 ， 接 通 电源 后 ， 检查 是 否 运转 正常 发 现 问题 及 
时 报告 管理 员 ， 并 找 上 一 次 使 用 者 问 明 情况 ， 知 情 不 报 者 追查 当 次 使 用 者 责任 。 

6. 若 在 择 作 使 用 期 间 出 现 故障 ， 应 及 时 关闭 电源 ， 并 向 有 关 管 理 人 员 报告 ， 严禁 擅自 处 理 、 拆 卸 、 调 整 仪器 主要 部 
Ee 凡 自 行 拆卸 者 一经 发 现 将 给 予 严重 处 罚 。 用 后 切断 电源 、 水 源 ， 各 种 按钮 回 到 原 位 ， 并 做 好 清洁 工作 、 锁 好 门 


7. 所 有 仪器 设备 的 操作 手册 及 技术 资料 原件 一 律 建 档 保存 ， 随 仪器 使 用 的 只 能 是 复印 件 。 

8. 保持 仪器 清洁 ， 仪 器 的 放置 要 远 高 强酸 、 强 碱 等 高 蚀 性 物品 ， 远 高 水 源 、 火 源 、 气 源 等 不 安全 源 。 

9. 各 仪器 要 根据 其 保养 、 维 护 要 求 ， 进 行 及 时 或 定期 的 干燥 处 理 、 充 电 、 维 护 、 校 验 等 ， 确 保 仪器 正常 运转 。 每 学 其 
进行 一 次 仪器 使 用 检查 ， 发 现 有 损坏 应 及 时 请 有 关 部 门 维修 。 

10. 仪器 不 能 随意 搬 动 ， 更 不 能 借 给 外 单位 使 用 ; 校内 人 员 经 实验 室 主任 批准 后 可 在 实验 室 按 上 述 规 定 使 用 。 


大 型 仪器 管理 办 公 室 








图 1-2-7 《大 型 分 析 仪器 管理 办 法 ?初始 效果 图 
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(7) 定义 样式 。 在 head 标记 中 插入 style 标记 ,分 别 定义 body、hl、 类 divl 的 样式 。 其 
中 样式 格式 定义 如 下 : 


< style type = "text/css"> 
body{text - align:center;font — size:20px;font ~ weight:bold;} 
hi{font - size:32px;font - family: 黑 体 ;height:62px;padding top:15px; 
text - align:center; color:white;background: # 9999ff;} 
.divl{width:650px; height:940px;text — align:left;padding:50px; 
background:url("prj_image2 2. jpg" ) ;letter - spacing:1px;} 
</style> 


其 中 body 样式 和 hl 标题 字样 式 立即 生效 ,而 图 层 div 样式 必须 引用 才 生效 。 
(8) 引用 样式 。 在 body 标记 中 分 别 给 div 标记 引用 样式 。 格 式 分 别 如 下 : 


<div class= "divl"> </div> 


(9) 保存 并 浏览 网 页 。 完 成 代码 设计 后 ,通过 浏览 器 (或 在 EditPlus 软件 中 按 Ctrl 十 B 
组 合 键 ) 查 看 网 页 ,观看 最 终 的 页 面 效果 ,如 图 1-2-6 所 示 。 


项 目 9 设计 饭店 菜单 价目 表 


1. 实 训 要 求 
(1) 利用 定义 列表 标记 制作 饭店 菜单 价目 表 。 
(2) 使 用 style 标记 给 body、div、dt、dd、h3 标记 定义 样式 。 
2. 实 训 内 容 
(1) 自 定 义 列表 应 用 。 
(2) 样式 表 定 义 与 使 用 。 
(3) 图 层 与 标题 字 的 应 用 。 
(4) 水 平分 隔 线 的 应 用 。 
3. 实 训 所 需 知 识 点 
(1) 定义 列表 dl 标记 
<dl> 
<dt>…</dt> 
<dd>:…</dd> 
< dd>…</dd> 
</dl> 
(2) 样式 style 标记 


< style type = "text/css"> 
body{background:url("prj image 2 4 153.jpg") no - repeat; } 


div{width:950px; height :730px; text - align:center;padding - left:80px;} 
dt{font:bold 24px;} 
dd{font:18px 隶书 四 
h3{font:bold 32px 黑体 ;color:red;} 
</style> 


(3) 图 层 div 标记 

<div>…</div> 

(4) 标题 字 h3 标记 

<h3 align = "center"> 绿 晶 饭 店 菜单 价目 表 </h3 > 


4. 实 训 过 程 与 指导 
编程 实现 绿 晶 饭店 菜单 价目 表 页 面 ,效果 如 图 1-2-8 所 示 ,具体 步骤 如 下 : 














1-2-8 绿 晶 饭 店 菜单 价目 表 页 面 






(1) 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程 序 名 称 为 prj_2_4. html, 格 式 如 下 : 


咏 马 寻 
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<! —— prj 2 4.html --> 


(2) 设计 网 页 初步 效果 。 在 body 标记 中 插入 图 层 div。 

(3) 在 div 标记 中 插入 h3 标题 字 标记 ,居中 显示 ,内容 为 “ 绿 晶 饭店 菜单 价目 表 ”。 

(4) 在 div 标记 中 插入 3 个 定义 列表 dl 标记 。 分 别 用 < dt ></dt > 标记 定义 3 个 菜单 标 
题 为 * 心 满意 粥 ”饮料 ”“ 红 酒 ”, 然 后 用 < dd ></dd > 标记 分 别 定 义 每 类 菜单 中 的 子 菜单 。 
代码 如 下 所 示 ,其 他 两 个 菜单 与 之 相同 。 


<dl> 
<dt > 心 满 意 粥 </dt > 

<dd> 菜 心 粒 肉 片 粥 
<dd> 皮 蛋 瘦 肉 粥 ………… 
<dd> 香 昔 鱼 片 粥 . 
<dd> 生 菜 丝 骨 脑 粥 .….…… 
<dd> 束 丝 杞 子 猪 肝 粥 .… 6 元 </dd> 
<dd> 状 元 及 第 粥 . .8 元 </dd> 
<dd> 生 菜 肚 丝 粥 . .8 元 </dd> 
<dd> 明 火 白粥 .………….2 元 </dd> 

</dl> 











具体 列表 内 容 分 别 如 下 : 


心 满 意 粥 





法 国 查尔斯 干 红 .… 2 
注册 解 百 纳 干 红 有 

张裕 圆 桶 干 红 ( 特 选 级 ) 黑 色 .……:168 元 / 瓶 
张裕 圆 桶 解 百 纳 ( 特 选 级 ) 红 色 …258 元 / 瓶 
张裕 卡 斯 特 ( 特 选 级 ) 黑 色 ……… 398 元 / 瓶 








(5) 编辑 完 3 个 dl 标记 后 ,保存 HTML 文档 ,并 通过 浏览 器 查看 网 页 效果 ,如 图 1-2-9 
所 示 。 

(6) 定义 样式 。 在 head 标记 中 插入 style 标记 ,分 别 定 义 body、div、dt、dd、h3 的 样式 。 
其 中 样式 格式 定义 如 下 : 


<style type = "text/css"> 


body{background:url("prj_image 2 4 153. jpg") no - repeat; /* 设置 背景 图 像 * /} 
div{width:950px; height :730px; text ~ align:center; 
padding - left:80px; /* 设 置 左 填充 为 80px, 让 定义 列表 整体 向 右 移动 x /} 
dt{font:bold 24px; /* 设 置 定义 项 目的 字体 加 粗 , 24px * / } 
dd{font:18px 隶书 /* 项 目 描述 字体 大 小 18px、 隶 书 * /} 
h3{font:bold 32px 黑体 ;color:red; /x 设置 h3 样式 x/} 
</style> 


所 有 样式 定义 完 后 立即 生效 。 
(7) 保存 并 浏览 网 页 。 完 成 代码 设计 后 ,通过 浏览 器 (或 在 EditPlus 软件 中 按 Ctrl 十 B 
组 合 键 ) 查 看 网 页 ,观看 最 终 的 页 面 效果 ,如 图 1-2-9 所 示 。 


C lo 人 iley//E:/ 清 华 社 -规划 教材 -实验 教材 第 3 版 资源 及 代码 20170526/ 实 训 2/ 实 训 2- 代 码 /prj_2_4.html 


绿 最 饭店 菜单 价目 表 


68 元 / 瓶 
| ( 特 选 级 ) 黑色 .….168 元 / 瓶 
张裕 圆 桶 解 百 纳 ( 特 选 级 ) 红色 .…2583 元 / 瓶 
张裕 卡 斯 特 ( 特 选 级 ) 黑色 .……398 元 / 瓶 








图 1-2-9 绿 晶 饭店 菜单 价目 表 初 始 页 面 (未 应 用 样式 ) 


咏 马 半 
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课外 拓展 训练 2 


1. 设计 简易 Web 页 面 ,效果 如 图 1-2-10 所 示 ,要 求 如 下 : 








font 标 记 及 文本 标记 的 应 用 


平淡 的 语言 娓 娓 道 来 ， 如 清水 芙蓉 ， 不 带 半 点 修饰 。 完 全 是 信 手 拓 来 ， 没 
有 任何 矫 揉 造作 之 痕 ， 正 是 平平 淡淡 才 是 真 。 





1-2-10 font 标记 及 文本 标记 的 应 用 


(1) 采用 4 号 标题 字 显 示 标 题 *font 标记 及 文本 标记 的 应 用 ”。 

(2) 将 * 平 淡 的 语言 妮 九 道 来 ,如 清水 芙蓉 ,不 带 半点 修饰 。 完 全 是 信 手 拓 来 ,没有 任何 
矫 揉 造作 之 痕 , 正 是 平平 淡淡 才 是 真 。” 首 行 缩 进 5 个 字符 ,字体 为 黑体 、 蓝 色 , 大 小 为 5。 

(3) 将 段落 “客居 他 乡 的 游子 , 面 对 如 霜 的 秋月 怎 能 不 想念 故乡 .不 想念 亲人 呢 ? 如 此 
一 个 千 人 吟 .万 人 唱 的 主题 却 在 这 首 小 诗 中 表现 得 淋漓尽致 ,以 致 千年 以 来 脸 久 人口 ,流传 
不 衰 1" 首 行 缩 进 4 个 字符 .前 一 句 为 加 粗 效果 、 后 一 句 为 斜体 并 带 下 画 线 效果 。 

(4) 程序 名 称 为 project_2_1. html。 

2. 编写 代码 实现 “食品 安全 管理 制度 ”页 面 ,如 图 1-2-11 所 示 ,要求 如 下 ， 

(1) 页 面 标题 :“ 食 品 安全 管理 制度 ”。 


食品 安全 管理 制度 


1 食堂 从 业 人 员 和 管理 人 员 必须 掌握 有 关 食 品 卫生 的 基本 : 


要 求 。 
2. 食堂 从 业 人 员 每 年 必须 进行 健康 检查 ， 新 参加 工作 和 临时 参加 工作 的 食品 生产 经 营 人 员 都 必须 进行 健康 检查 。 | 
3. 食堂 从 业 人 员 在 出 现 咳嗽 、 腹 泻 、 发 热 、 呕吐 等 有 碍 于 食品 卫生 的 症状 时 ， 应 立即 脱 高 工作 岗位 ， 待 查 明 病因 ， 排 


”工作 前 ， 处 理 食 后 品 原料 后 用 肥 昨 及 流 : % 动 清水 洗手 ; 接触 直接 入 口 食品 之 前 应 洗手 消毒 。 
， 穿戴 清洁 的 工作 衣 、 幅 ， 并 把 头发 置 于 幅 内 。 

”加 工 食品 时 不 得 留 长 指甲 、 涂 指甲 油 及 戴 戒 指 等 . 

=。 不 得 在 食品 加 工 和 销售 场所 内 吸烟 。 


图 1-2-11 食品 安全 管理 制度 








(2) 页 面 内 容 : 3 号 标题 字 显示 “食品 安全 管理 制度 ”,h3 标记 样式 为 “字体 大 小 36px、 
背景 色 # 3366ff、 字 和 白色、 填充 (padding)10px?; 水 平分 隔 线 属 性 设置 “大 小 40px、 颜 色 
#3366ff”。 

(3) 程序 名 称 : project_2_2. html。 
附 : 制度 内 容 如 下 : 


食堂 从 业 人 员 和 管理 人 员 必 须 掌 握 有 关 食 品 卫生 的 基本 要 求 。 

食堂 从 业 人 员 每 年 必须 进行 健康 检查 ,新 参加 工作 和 临时 参加 工作 的 食品 生产 经 营 人 员 都 必须 进行 
健康 检查 。 

食堂 从 业 人 员 在 出 现 咳嗽 ,腹泻 发 热 \, 呕 吐 等 有 碍 于 食品 卫生 的 症状 时 ,应 立即 脱离 工作 岗位 , 待 查 
明 病 因 , 排除 有 碍 食品 卫生 的 病症 或 愈 后 方 可 重新 上 岗 。 

食堂 从 业 人 员 应 有 良好 的 个 人 卫生 习惯 ,必须 做 到 : 

。 工 作 前 ,处 理 食品 原料 后 用 肥皂 及 流动 清水 洗手 ; 接触 直接 入 口 食品 之 前 应 洗手 消毒 。 

。 穿戴 清洁 的 工作 衣 、 帽 ,并 把 头发 置 于 帽 内 。 

。 加工 食品 时 不 得 留 长 指甲 , 涂 指甲 油 及 戴 戒 指 等 。 

。 不 得 在 食品 加 工 和 销售 场所 内 吸烟 。 


秦 式 化 文 杰 ,段落 与 列表 
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实 训 3 超 链接 与 多 媒体 文件 应 用 





【 实 训 目标 】 

(1) 掌握 超 链接 的 标记 语法 、 属 性 语法 ,学 会 为 网 页 添加 各 种 超 链接 。 
(2) 掌握 书签 链接 定义 与 语法 ,学 会 使 用 书签 链接 设计 Web 页 面 。 
(3) 掌握 img 和 marquee 标记 语法 与 属性 的 设置 方法 。 

(4) 掌握 embed 标记 语法 与 属性 的 设置 方法 ,为 页 面 添加 多 媒体 文件 。 
【 实 训 内 容 】 

(1) 使 用 超 链 接 制作 网 站 导航 条 。 

(2) 使 用 无 序列 表 制 作 网 站 导航 条 。 

(3) 使 用 书签 设计 新 生 课 程 简介 。 

(4) 使 用 embed 标记 制作 带 有 音乐 视频、 动画 的 网 页 。 

【 实 训 项 目 】 

(1) 设计 简易 灯箱 画廊 。 

(2) 设计 支持 音频 ,视频 播放 的 网 页 。 

(3) 设计 简易 导航 网 站 。 

(4) 设计 专业 课程 导航 。 


项 目 10 设计 简易 灯箱 画廊 


1. 实 训 要 求 

(1) 利用 超 链接 和 图 像 标 记 设 计 简易 灯箱 画廊 。 
(2) 给 简易 灯箱 画廊 增加 背景 音乐 效果 。 
2. 实 训 内 容 

(1) 超 链接 的 应 用 。 

(2) 无 序列 表 的 使 用 。 

(3) 图 像 标 记 的 应 用 。 

(4) 背景 音乐 的 应 用 。 

(5) 样式 表 定 义 与 使 用 。 

(6) 浮动 框架 的 定义 与 使 用 。 

3. 实 训 所 需 知识 点 

(1) 超 链接 a 标记 


<a href ="" title="" target = "" > 链接 内 容 </a> 


(2) 无 序列 表 ul 标记 


<ul type= ""> 
<1i type= ""> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 

</ul> 


(3) 图 像 img 标记 
< img src= "url" width= "" height ="" alt= "" vspace= "" hspace="" border = "" align = ""> 
(4) 使 用 embed 标记 播放 背景 音乐 


< embed src = "trees/Sleep Away. mp3" loop= "true" autostart = "true"” width = "0" height = "0"> 
</embed> 


(5) 浮动 框架 iframe 标记 


< iframe src= "" name = "iframe" width = "500px" height = "300px"></iframe> 


4. 实验 所 需 素材 

在 trees 文件 夹 中 提供 一 个 MP3 文件 和 18 个 JPG 文件 ,设计 页 面 时 可 以 使 用 。 

5. 实 训 过 程 与 指导 

编程 实现 简易 灯箱 画廊 ,用 鼠标 单 击 任 一 图 像 超 链接 ,在 底部 浮动 框架 中 显示 大 图 像 ， 
效果 如 图 1-3-1 所 示 , 具 体 步 又 如 下 : 











简易 灯箱 画廊 设计 


六 13 本 


pl 
1-3-1 简易 灯箱 画廊 3 
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(1) 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程 序 名 称 为 prj_3_1. html。 格 式 如 下 : 


<!-- prj 3 1.html -一 > 


(2) 在 HTML 文档 head 标记 中 插入 样式 style。 
(3) 在 body 标记 中 执行 如 下 操作 : 
@ 插入 embed 标记 实现 背景 音乐 。 


< embed src = "trees/Sleep Away. mp3" loop = "true" autostart = "true" width = "0" height = "0"> 
</embed > 


@ 插入 类 名 为 *div1” 的 div。 
<div class= "divl" id=""></div> 


@ 在 div 中 插入 无 序列 表 < ul ></ul >。 
@ 在 标记 中 插入 <1li></li>, 依 次 在 li 标记 中 插入 超 链 接 , 并 将 文字 和 图 像 作为 超 
链接 的 标题 ,格式 如 下 : 


<1i><a href = "trees/t1. jpg" target ="_top"> 
T1<br>< img src = "trees/t1. jpg"/></a></1i> 


(4) 在 div 中 插入 浮动 框架 iframe 标记 ,并 设置 浮动 框架 name、src、 width height、 
frameborder 等 属性 。 浮 动 框架 中 默认 显示 的 图 像 文 件 为 trees/t1. jpg。 如 下 所 示 : 

< iframe name = "iframe" src = "trees/tl. jpg" width = "500px" height = "300px" frameborder = 

mon> 

</iframe> 


(5) 在 style 标记 中 分 别 定义 body div、ul\li\h3 \a 等 标记 的 样式 。 
@ 主体 body 样式 


body{ text - align:center; /* 页 面 内 容 居中 * /} 
@ 图 层 类 divl 样式 


.divl{width:900px; height:500px;margin: 0px auto; 
text - align:center; background — color: #33cc99;} 


@ 列表 项 标记 ul\li 样 式 


ul{margin:0 auto;width:800px; list — style ~ type:none; height:120px;} 
li{float:left;width:110px; height :90px;margin: 5px;} 


@ 图 像 标记 img 样式 


img{border:0;width:100px; height :80px;} 


Q@ 3 号 标题 字样 式 
h3{font - size:24px;color:white;padding:10px auto;} 
@) 超 链接 a 伪 类 样式 


a{color: # ffffff;text — decoration:none;} 
a:link,a:visited, a:active{color: # 0033cc;} 
a:hover{border - bottom:4px solid #FF0000; /* 鼠标 悬 停 时 有 红色 的 底 边 线 出 现 * /} 


(6) 完成 代码 设计 后 ,通过 查看 网 页 ,观看 页 面 最 终 效 果 , 如 图 1-3-1 所 示 ; 单 击 任 一 张 
图 后 ,能 够 在 底部 的 浮动 框架 中 浏览 该 图 对 应 的 大 图 。 


项 目 11 设计 支持 音频 、 视 频 播 放 的 网 页 


1. 实 训 要 求 
(1) 利用 embed 标记 为 网 页 添加 多 媒体 文件 。 
(2) 利用 marquee 标记 实现 网 页 滚动 字幕 的 效果 。 
(3) 利用 图 层 div 标记 设置 多 媒体 文件 展示 区 域 布局 。 
2. 实 训 内 容 
(1) 网 页 多 媒体 文件 的 应 用 。 
(2) 网 页 滚动 文字 的 实现 。 
(3) 段落 与 排版 标记 的 使 用 。 
(4) 无 序列 表 的 使 用 。 
(5) 字体 font 标记 的 使 用 。 
(6) 样式 表 的 定义 与 使 用 。 
3. 实 训 所 需 知 识 点 
(1) 定义 列表 ul 标记 
<ul type= ""> 
<1i type = ""> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 


<1i> 列 表 项 </1i> 
</ul> 


(2) 样式 style 标记 


< style type = "text/css"> 


ul{ list— style— type:none; /* 删除 列表 项 前 面 的 符号 */} 
1i{ float:1eft; /* 实现 水 平 导航 */ 
margin:20px; /* 设 置 边 界 为 20px */} 实 
</style> ， 
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(3) 图 层 div 标记 
<div style= "width:100pxiheight:200px;background - color: #999999">.…</div> 
(4) 滚动 文字 marquee 标记 


< marquee direction = "up" behavior = "alternate”onMouseOver = "this. stop()" onMouseOut = 
"this. start()" > 滚动 文字 </marquee> 


(5) 多 媒体 文件 应 用 embed 标记 


< embed src = "" loop = "true|false " autostart = "true|false" width= ""” height = "" ></embed> 


4. 实 训 过 程 与 指导 
编程 设计 支持 音频 、 视 频 播放 的 网 页 ,效果 如 图 1-3-2 所 示 ,具体 步骤 如 下 : 




















明月 几时 有 













明月 几时 有 ?把 三 癌 身 天 。 
不 知 天 上 守 阅 ， 今 礼 是 何 太 ， 
民政 末 内 妇 令 ， 又 屿 于 检 天 宁 ， 
两 区 不 用 沦 ， 起 由 关注 彩 ， 何 众 在 人 间 。 
办 水 间 ， 低 绪 户 ， 总 无双。 
不 应 有 限 ， 何 于 长 测 期 时间。 
人 天 着 欢 高 合 ， 月 家 办 国 映 ， 北 京 古 准 全 ， 
但 是 人 长 入 ， 下 里 基 埠 细 。 

















图 1-3-2 ”多 媒体 及 滚动 字幕 网 页 设计 效果 


(1) 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新建 HTML 网 
页 ,在 首 行 插入 注释 请 句 , 注 明 程 序 名 称 为 prj_3_2. html。 格 式 如 下 : 


< -> "pri3.2.hbtal 二 一 > 


(2) 在 HTML 文档 head 标记 中 插入 样式 style。 

(3) 在 body 标记 中 分 别 进行 下 列 操作 : 

@ 插入 标题 字 h2 标记 显示 歌词 的 名 称 。 

@ 继续 插入 水 平分 隔 线 hr 标记 。 

@ 插入 font 标记 ,设置 显示 歌词 的 样式 ,歌词 内 容 如 下 所 示 : 


明月 几时 有 ?把 酒 问 青天 。 

不 知 天 上 宫阙 ,今夕 是 何 年 。 

我 欲 乘 风 归 去 , 又 恺 琼 楼 玉宇 ,高 处 不 胜 寒 ,起 舞 弄 清 影 , 何 似 在 人 间 。 
转 朱 阁 , 低 绮 户 , 照 无 眠 。 

不 应 有 恨 , 何 事 长 向 别 时 圆 。 

人 有 翡 欢 离合 ,月 有 阴 晴 圆 缺 ,此 事 古 难 全 。 

但 愿 人 长 久 ,千里 共 婵 娟 。 


@ 插入 图 层 div, 并 在 图 层 内 插入 无 序列 表 , 在 列表 项 中 分 别 插入 不 同 的 多 媒体 文件 。 

@ 在 div 结束 标记 后 插入 滚动 文字 marquee 标记 ,设置 滚动 文字 标记 属性 实现 向 左 交 
替 滚 动 。 

(4) 在 style 标记 中 分 别 定义 body ul\li\div 和 marquee 标记 样式 。 


body{ text - align: center;} 

ul{flist- style- type:none;} 

li{float:left;margin:20px} 

div{height:250px;background - color: #99cc00;text - align:center;} 
marquee{font - size:16px;padding:4px auto;} 


(5) 完成 代码 设计 后 ,通过 查看 网 页 ,观看 页 面 最 终 效果 ,如 图 1-3-2 所 示 。 
项 目 12 设计 简易 导航 网 站 
1. 实 训 要 求 


(1) 在 浏览 器 URL 中 输入 网 址 *http://www. hao123. com” 访 问 网 站 ,部 分 页 面 截 图 
如 图 1-3-3 所 示 。 参 照 此 图 中 第 一 行 导航 的 效果 编写 代码 实现 导航 条 目 。 





百度 新 浪 腾讯 " QQ 空间 搜狐 网 易 谷 歌 
凤凰 网 新 浪 微 博 新 华 网 人 民 网 中 国 移动 CNTV 
人 人 网 开心 网 套 尔 号 汽车 之 家 4399 游 戏 太平 洋 电 脑 
东方 财富 58 同 城 中 彩 网 淘宝 网 湖南 卫视 智联 招聘 
工商 银行 凡 宪 诚 品 中 关 村 在 线 苏宁 易 购 易 车 网 去 哪儿 网 
京东 商城 国美 电器 美 团 网 卓越 亚 马 庆 唯 品 会 世纪 佳缘 








图 1-3-3 haol123 部 分 链接 截图 


(2) 分 别 采 用 段落 与 超 链接 组 合 和 无 序列 表 与 超 链接 组 合 完成 导航 条 目的 设计 。 
2. 实 训 内 容 

(1) 超 链接 的 定义 与 应 用 。 

(2) 无 序列 表 的 定义 与 使 用 。 

(3) 样式 表 的 定义 与 使 用 。 

(4) 段落 图 层 标记 的 使 用 。 


避 妇 
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3. 实 训 所 需 知识 点 
(1) 超 链接 a 标记 


<ahref ="" target="" title= "">…</a> 
(2) 无 序列 表 ul 标记 
<ul type= "disc"> 

<1i>…</1i> 


< 1i>…</1i> 
</ul> 


(3) 段落 p 标记 
<palign= "center ">…</p> 


(4) 样式 style 标记 


< style type = "text/css "> 


ul{ list- style- type:none; /* 去 掉 无 序列 表 前 面 的 符号 * / 
font - size:22px; line— height:33px; } 
1i{ width:100px;display: inline; /* 列表 项 在 一 行 中 显示 * / } 
</style> 


4. 实 训 过 程 与 指导 
采用 段落 或 无 序列 表 与 超 链接 组 合 实现 网 站 导航 ,页 面 效果 如 图 1-3-4 所 示 , 具 体 步骤 
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使 用 段落 标记 和 超 链接 实现 网 站 导航 
百度 ”新浪 网 易 腾 迅 ”搜狐 360 搜索 


利用 无 序列 表 实现 水 平 导 航 条 
百度 新 浪 网 易 腾讯 搜狐 360 搜 索 











图 1-3-4 ”两 种 方式 实现 网 站 导航 的 效果 图 


(1) 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程序 名 称 为 prj_3_3. html, 格 式 如 下 : 


<!1 —— prj_3_3.html -一 > 


(2) 在 HTML 文档 head 标记 中 插入 样式 style。 
(3) 在 body 标记 中 分 别 进行 下 列 操作 : 
@ 先 插入 < div ></div >, 再 在 < div > 标记 中 间 插 入 一 个 段落 p 标记 ,并 在 段落 中 连续 


插入 6 个 超 链接 ,通过 4 个 &nbsp; 分 隔 每 个 导航 条 目 ,按照 表 1-3-1 所 示 的 URL 分 别 设置 




















超 链接 的 href 属性 和 超 链接 的 标题 。 
表 1-3-1 网 页 首 行 导航 链接 信息 表 
序号 网 站 名 称 URL 
百度 http://www. baidu. com/ 
2 新 浪 http://www. sina. com. cn/ 
3 腾讯 http://www. qq. com/ 
4 搜狐 http://www. sohu. com/ 
5 网 易 http://www. 163. com/ 
6 360 搜索 https://www. so. com/ 








@ 插入 水 平分 隔 线 < hr >, 并 设置 对 齐 、 大 小 、 颜 色 等 属性 ,格式 如 下 所 示 : 
<hr align = "center" size="3" color = "#0066ff"> 
@ 插入 无 序列 表 , 并 插入 6 个 列表 项 标记 。 


@ 在 列表 项 标记 中 插入 超 链接 ,并 设置 超 链接 的 属性 。 
(4) 保存 并 查看 网 页 ,页面 效果 如 图 1-3-5 所 示 ( 未 使 用 样式 时 页 面 效 果 )。 
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使 用 段落 标记 和 超 链 接 实现 网 站 导航 
百度 ”新浪 网 易 腾 肪 ”搜狐 360 搜 索 


利用 无 序列 表 实现 水 平 导 航 条 





1-3-5 未 使 用 样式 时 导航 条 目 页 面 


(5) 在 style 标记 中 分 别 定义 无 序列 表 样式 和 列表 项 样式 。 
中 导航 居 左 显示 
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/* 自动 居 左 显示 */ 


ul{list— style— type:none; /* 去 掉 列表 项 前 面 的 符号 x* /} 
li{float:left; width:100px; /* 垂直 列表 项 转换 为 水 平 列表 项 * / } 
@ 导航 居中 显示 


/* 自动 居中 显示 */ 

ul{list - style - type:none; text - align:center;/* 去 掉 列表 项 前 面 的 符号 ,列表 项 居中 显示 * /} 
li{display: inline; /* 列表 项 行内 显示 */} 

1i afpadding:0 20px; /* 列表 项 中 的 超 链接 的 宽度 , 分隔 导航 条 目 * / } 


@ 图 层 内 容 居 中 显示 


div{text ~ align: center;} 


(6) 完成 代码 设计 后 ,通过 查看 网 页 ,观看 页 面 的 最 终 效果 ,如 图 1-3-4 所 示 。 
项 目 13 设计 专业 课程 导航 


1. 实 训 要 求 

利用 无 序列 表 与 书签 链接 设计 专业 课程 导航 。 
2. 实 训 内 容 

(1) 超 链接 的 定义 与 使 用 。 

(2) 书签 的 定义 与 使 用 。 

(3) 无 序列 表 的 定义 与 使 用 。 

(4) HTML 注释 标记 的 使 用 。 

3. 实 训 所 需 知识 点 

(1) 超 链接 a 标记 


<a name = "书签 名 称 " href = "" target =""> 链 接 内 容 </a> 
(2) 段落 p、 标 题字 h2、h3 标记 


<h2 align = "center"> 专 业 课程 导航 </h2 > 
<h3><a name = "dir3"></a> 大 学 物理 </h3 > 
<p>“ 高 等 数学 ”课程 介绍 随 着 科学 技术 的 迅猛 发 展 …</p> 


(3) 无 序列 表 ul 标记 


<ul> 
<1i> 英 语 </1i> 
<1i> 高 数 </1i> 
<1i> 大 学 物理 </1i> 
</ul> 


(4) 样式 style 标记 
< style type = "text/css"> 


p{text ~ indent: 2em; /* 首 行 缩 进 2 个 字符 * /} 
</style> 


4. 书签 的 定义 与 使 用 
通过 超 链接 a 标记 的 name 和 href 属性 设置 书签 名 称 和 书签 链接 ,分 以 下 两 个 步 又 : 
(1) 定义 书签 名 称 


<a name = "书签 名 称 " > 书签 标题 </a> 


(2) 制作 书签 链接 
O@ 同 页 面 内 使 用 书签 链接 .格式 如 下 所 示 : 


<a href = "# 书 签名 称 ”target = "窗口 名 称 "></a> 
@ 异 页 面 内 使 用 书签 链接 ,格式 如 下 所 示 : 

<a href = "url# 书 签名 称 " target = "窗口 名 称 "></a> 
Q@ 注释 标记 : 

<! -- 注释 语句 --> 


5. 实 训 过 程 与 指导 
和 效果 如 图 1-3-6 所 示 ,具体 步骤 如 下 : 








上 | ”基础 英语 、 高 级 英语 、 报 刊 选 污 、 党 口 请、 英语 写作 、 翻 译 理论 与 实践 、 语 言 理论 、 语 言 学 概论 、 主 要 英语 国家 文学 史 及 
‖ 文学 作品 选读 、 主 要 英语 国家 国情 等 返回 


| 高 数 
随 着 科学 技术 的 迅 色 发 展 , 数学 正 日 益 成 为 各 学 科 进 行 科学 研究 的 重要 手段 和 工具 。 高 等 数学 是 近代 数学 的 基础 2 是 理科 各 专 
代 科学 技术 、 经 济 管 理 、 人 文科 学 中 应 用 最 广泛 的 一 门 课程 。 因 此 学 好 这 门 课程 对 学 


.本 i 后 2 学 习 的 第 一 门 重 要 的 数学 基础 课 。 通 过 本 课程 的 教学 使 学 生 掌 握 处 理 数学 
法 培养 学 生 科学 思维 能 力 -同时 为 后 坟 深 程 的 学 习 甘 十 良好 的 基础 。 返回 


以 物理 学 基础 为 内 容 的 大 学 物理 课程 ， 是 理工 科 名 专业 学 生 一 门 重 要 的 通 识 性 的 必修 基础 课 。 大 学 物理 课程 既 为 学 生 打 好 必要 
的 物理 基础 ， a 增强 学 生 分 析 问 题 和 解决 问题 的 能 力 ， 培 养 学 生 的 探索 精神 、 创 新 意识 等 方面 , 具有 其 
他 课程 不 能 营 代 的 重要 作用 。 





号 


图 1-3-6 专业 课程 导航 页 面 
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(1) 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程 序 名 称 为 prj_3_4. html。 格 式 如 下 : 


<! -- prj 3 4.html -一 > 


(2) 在 body 标记 中 进行 下 列 操作 : 
Oz 插入 h2 标记 ,内 容 为 “专业 课程 导航 ”, 设 置 align 属性 为 居中 。 
@ 用 超 链 接 定义 根 书签 名 称 ,代码 如 下 所 示 : 


<aname= "dir0"> 专 业 课程 导航 </a> 


@ 在 body 中 插入 1 个 无 序列 表 , 定 义 课程 书签 链接 导航 目录 。 在 无 序列 表 中 插入 列 
表 项 ,在 列表 项 里 ,用 超 链 接 建 立 书签 链接 ,书签 名 称 分 别 为 dirl ,dir2 .dir3。 代 码 如 下 
所 示 : 





<ul> 
<1i><a href = "#dir1"> 英 语 </a></1i> 
<1i><a href ="#dir2"> 高 数 </a></1i> 
<1i><ahref ="#dir3"> 大 学 物理 </a></1i> 
</ul> 


@ 分 别 用 标题 字 h3 标记 和 段落 标记 来 定义 各 个 书签 的 具体 内 容 , 并 设置 返回 “ 根 书 
签 ” 的 链接 。 第 1 个 书签 名 和 书签 名 对 应 的 内 容 定义 代码 格式 如 下 所 示 : 


<h3 ><a name = "dirl"> 英 语 </a> </h3 > <! -- 英语 --> 

<p> 基 础 英语 、 高 级 英语 ,报刊 选读 ,视听 口语、 英语 写作 、 翻 译 理 论 与 实践 .语言 理论 .语言 学 概论 、 
主要 英语 国家 文学 史 及 文学 作品 选读 ,主要 英语 国家 国情 等 。< strong><a href = "# dir0"> 返 回 </a> 
</strong> 

</p> 


其 他 两 个 书签 结构 代码 如 上 所 示 ,书签 对 应 的 内 容 如 下 所 示 : 


英语 

基础 英语 、 高 级 英语 ,报刊 选读 ,视听 口语、 英语 写作 、 翻 译 理论 与 实践 ,语言 理论 .语言 学 概论 ,主要 
英语 国家 文学 史 及 文学 作品 选读 、 主 要 英语 国家 国情 等 。 返回 

高 等 数学 

随 着 科学 技术 的 迅猛 发 展 , 数 学 正 日 益 成 为 各 学 科 进行 科学 研究 的 重要 手段 和 工具 。 高 等 数学 是 近 
代数 学 的 基础 ,是 理科 各 专业 和 经 济 管理 专业 类 学 生 的 必修 课 , 也 是 在 现代 科学 技术 、 经 济 管理 .人 文科 学 
中 应 用 最 广泛 的 一 门 课程 。 因 此 学 好 这 门 课程 对 学 生 今后 的 发 展 是 至 关 重要 的 。 本 课程 是 学 生 进 入 大 学 
后 学 习 的 第 一 门 重要 的 数学 基础 课 。 通 过 本 课程 的 教学 ,使 学 生 掌 握 处 理 数学 问题 的 思想 和 方法 ,培养 学 
生 的 科学 思维 能 力 ,同时 为 后 续 课程 的 学 习 葛 定 良好 的 基础 。 返回 

大 学 物理 

以 物理 学 基础 为 内 容 的 大 学 物理 课程 ,是 理工 科 各 专业 学 生 一 门 重 要 的 通 识 性 的 必修 基础 课 。 大 学 
物理 课程 既 为 学 生 打 好 必要 的 物理 基础 ,又 在 培养 学 生 科 学 的 世界 观 ,增强 学 生 分 析 问 题 和 解决 问题 的 能 
力 ,培养 学 生 的 探索 精神 、 创 新 意识 等 方面 ,具有 其 他 课程 不 能 蔡 代 的 重要 作用 。 返回 


(3) 完成 代码 设计 后 .通过 查看 网 页 ,观看 页 面 效 果 , 如 图 1-3-6 所 示 。 


课外 拓展 训练 3 


1. 按 如 下 要 求 设计 Web 页 面 ,如 图 1-3-7 所 示 。 要 求 如 下 : 

(1) 页 面 标题 为 “桂林 风景 展览 ”。 

(2) 正文 标题 为 红色 ,图 片 分 别 为 image51. jpg image52. jpg image53. jpg ,image54. 
jpg; 采用 无 序列 表 布 局 ,每 一 个 列表 项 的 内 容 为 图 像 链 接 , 单 击 小 图 ,可 以 浏览 大 图 。 

(3) 定义 样式 。imeg 标记 样式 为 “宽度 100px、 高 度 100px、 边 框 0px”; h3 标记 样式 为 
“红色 、 居 中 ”; ul 样式 为 “去 除 列表 项 前 的 符号 、 内 容 居 中 显示 、 边 界 上 下 为 0 左右 自动 . 宽 
度 520px、 高 度 150px”; li 样式 为 “向 左 浮动 、 宽 度 120px\ 行 高 30px”。 

(4) 程序 名 称 为 project_3_1. html。 

















1-3-7 桂林 风景 展览 


2. 设计 “中 国名 牌 大 学 简介 ”页 面 ,效果 如 图 1-3-8 所 示 。 要 求 如 下 : 

(1) 页 面 标题 为 “中 国名 牌 大 学 简介 ”, 页面 首 行 3 号 标题 字 显示 ,标题 为 “中 国名 牌 大 
学 简介 ”。 

(2) 页 面 中 间 插 入 两 条 水 平分 隔 线 , 分 隔 线 中 间 滚 动 文字 标记 ,滚动 方式 为 来 回 交替 滚 
动 。 滚 动 文字 标记 内 插入 7 个 大 学 超 链接 ,分 别 为 清华 大 学 (http://www. tsinghua. edu. cn/)、 








C |o 127.0.0.1:8020/ 清 华 社 -规划 教材 -实验 教材 第 3 版 资源 及 代码 20170526/ 实 训 3/ 实 训 3- 代 码 … 六 | } 








中 国名 牌 大 学 简介 





清华 大 学 北京 大 学 上 海 交 通 大 学 复旦 大 学 南京 大 学 西安 交通 大 学 哈尔滨 工业 大 学 











1-3-8 ”中国 名牌 大 学 简介 pl 
3 
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北京 大 学 (http://www. pku. edu. cn/)、 上 海 交 通 大 学 (http://www. sjtu. edu. cn/) ,复旦 
大 学 (http://www. fudan. edu. cn/index. html) 、 南 京 大 学 (http://www. nju. edu. cn/) \ 西 
安 交 通 大 学 (http://www. xjtu. edu. cn/) ,哈尔滨 工业 大 学 (http://www. hit. edu. cn/)。 
(3) 将 鼠标 悬 停 在 滚动 文字 上 时 会 停止 滚动 (设置 onmouseover 一 "this. stop();"), 鼠 
标 从 滚动 文字 上 移出 时 会 继续 滚动 (onmouseout 王 "this. start();"), 单 击 超 链接 时 访问 相 
关 大 学 网 站 。 
(4) 程序 名 称 为 project_3_2. html。 


bP am 人 
第 二 部 分 


页 面 布 局 技术 





实 训 4 DIV 二 CSS 综合 运用 





【 实 训 目 标 】 

(1) 掌握 CSS 基本 概念 `CSS 类 型 及 4 种 CSS 样式 定义 的 方法 。 

(2) 掌握 CSS 中 字体 、 排 版 .颜色 .背景 ,列表 等 属性 设置 。 

(3) 掌握 DIV 和 SPAN 标记 语法 ,学 会 使 用 相关 CSS 属性 来 定义 样式 。 

【 实 训 内 容 】 

(1) 定义 4 种 样式 表 , 并 学 会 引用 

(2) 自 定义 外 部 样式 表 , 并 能 在 web 页 面 中 导入 或 链接 外 部 样式 表 。 

(3) 使 用 CSS 盒 模型 的 MBPC(margin、border、padding、content) 来 精确 定位 网 页 元 
素 , 运 用 段落 .字体 .颜色 .背景 及 列表 等 CSS 专 有 的 属性 进行 页 面 精细 加 工 。 

(4) 区 别 CSS 选择 符 类 型 ,并 能 灵活 运用 各 种 选择 符 完成 样式 的 定义 。 

【 实 训 项 目 】 

(1) 设计 《中 国教 育 网 络 ) 杂 志 简 介 页 面 。 

(2) 设计 《京东 商品 导购 》 页 面 。 


项 目 14 设计 《中 国教 育 网 络 》 杂 志 简 介 


1. 实 训 要 求 

(1) 利用 多 种 CSS 样式 表 设 计 《 中 国教 育 网 络 ) 杂 志 简 介 页 面 。 
(2) 学 会 综合 运用 DIV 十 CSS 进行 页 面 布局 设计 。 
2. 实 训 内 容 

(1) 定义 行内 样式 表 ( 内 嵌 样 式 表 / 内 联 样式 表 )。 
(2) 定义 内 部 样式 表 。 

(3) 导入 ( 租 入 ) 外 部 样式 表 。 

(4) 链接 外 部 样式 表 。 

(5) 无 序列 表 的 定义 与 应 用 。 

(6) 定义 列表 的 定义 与 应 用 。 

(7) 标题 字 标记 的 使 用 。 

3. 实 训 所 需 知识 点 

(1) 图 层 div 标记 


<div id= "divl" class= "div2"> … </div> 
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(2) span 标记 
<p class = "tip">< span > 提示 : </span>…</p> 


(3) 链接 link 标记 


< link type = "text/css" rel = "stylesheet" href = "layout_ link.css"/> 


(4) 图 像 ul 标记 


<ul> 
<1i> CosT 论坛 "迎新 "系列 视频 讲座 </1i> 
<1i> 技 术 应 用 升级 百 所 高 校 IPv6 蝶 变 </1i > 
</ul> 


(5) 超 链接 a 标记 


<a href = "#"> 强 调 应 用 移动 IPv6 发 展 空间 无 限 </a> 


(6) 定义 列表 dt 标记 


<dl> 
<dt> 推 荐 阅读 </dt > 
< dd > 始终 保持 教育 信息 化 领域 第 一 品牌 的 市 场地 位 </dd> 
< dd> 成 为 与 中 国教 育 信息 化 同步 发 展 的 核心 媒体 </dd> 
</dl> 


4. 多 种 样式 表 的 定义 
(1) 行内 样式 表 。 行内 样式 表 是 通过 标记 的 style 属性 来 进行 设置 的 ,行内 样式 优先 级 
最 高 ,如 下 所 示 : 


<div style= "background: # ffff33;width:100 % ;height:100px;"> 


(2) 内 部 样式 表 
内 部 样式 表 是 在 HTML 的 head 标记 中 通过 style 标记 来 定义 的 ,具体 格式 如 下 所 示 : 


<style type = "text/css"> 
body{background: # 66ffff;font — size:18px;} 
.divi{width:100 % ;height:100px;background: #99cc33;} /* 类 选择 符 */ 
.pl{color:blue;font ~— size:32px;} 

</style> 


(3) 链接 外 部 样式 表 。 链 接 样式 表 通 过 link 标记 的 href 属性 加 载 外 部 样式 表 文 件 ， 
样式 表 文件 名 必须 带 后 缀 . css, 否则 不 能 加 载 ,同时 对 type、rel 属性 进行 设置 ,格式 如 下 
所 示 : 


< link type = "text/css" rel = "stylesheet" href = "layout link.css"/> 


(4) 导入 外 部 样式 表 


< style type = "text/css"> 
@import url("layout import. css"); 
</style> 


导入 样式 表 通 过 @import url(“* 样 式 表 文 件 名 ”); ,格式 中 四 与 import 必须 连 在 一 起 
写 , 两 者 之 间 不 能 有 空格 ,并 以 分 号 结束 ,否则 也 不 能 加 载 外 部 样式 文件 。 

CSS 样式 的 优先 级 顺序 从 高 到 低 分 别 为 : 行内 样式 一 ID 样式 一 类 样式 一 标记 样式 。 

5. 实 训 过 程 与 指导 

综合 运用 DIV 十 CSS 设计 《中 国教 育 网 络 ) 杂 志 简 介 页 面 ,效果 如 图 1-4-1 所 示 。 具 体 
步骤 如 下 : 

(1) 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程 序 名 称 为 prj_4_1. html。 格 式 如 下 : 


~ pe Tl ==> 


(2) 在 HTML 文档 head 标记 中 插入 style 标记 。 
(3) 在 body 标记 中 插入 第 1 个 div,id 为 div0。 采 用 导入 外 部 样式 表 layout_import. 
css 的 方式 来 定义 div 的 样式 。 导 入 外 部 样式 表格 式 如 下 : 


< style type = "text/css"> 
@import url("layout_ import. css"); 
</style> 


在 layout_import. css 中 定义 div 的 样式 。 格 式 定义 如 下 : 


#divO{border:1px solid #¢cccccc;width:850px; height :780px;margin:5px auto;} 


(4) 在 id 为 div0 的 图 层 中 插入 4 个子 图 层 , 分 别 插入 标题 字 、 无 序列 表 、 定 义 列表 、 段 
落 等 标记 完成 页 面 设 计 。 具 体 定义 如 下 所 示 : 
@ 搬入 class 为 divl 的 div, 第 1 个 子 图 层 应 用 行内 样式 表 。style 属性 设置 如 下 : 


<div class = "divl" style= "background:url('zw_logo. jpg') no - repeat top left;width:100%; 
height:80px; text ~ align:center;padding:10px auto;"></div> 


在 第 1 个 子 div 中 插入 h2、h4 标记 ,内 容 分 别 为 《中 国教 育 网 络 ) 杂 志 简 介 ”2016- 
03-03”。 
@ 插入 class 为 div2 的 div, 第 2 个子 图 层 应 用 内 部 样式 表 。 格 式 如 下 所 示 : 


将 


.div2{width:100 % ;background: # FOFOFO; height:120px; line — height:1. 5em; padding:10px auto;} 


上 兰 





DIV 十 CSS 综合 运用 
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= Fm 《中 国教 育 网 络 》 杂 志 简 介 
育 网 络 
信息 化 创造 教育 未 来 2016-03-03 





> 推荐 园 读 


“COST 论坛 "迎新 "系列 视频 讲座 技术 应 用 升级 百 所 高 校 IPv6 斩 变 教育 信息 化 关注 ' 十 二 五 ' 烦 划 
“2010 下 一 代 互联 网 发 展 和 应 用 论坛 教育 信息 化 服务 器 应 用 突破 莒 从 强调 应 用 移动 JPv6 发 展 宝 间 无 限 


2004 年 12 月 ，《 中 国教 育 网 络 》 杂 志 正 式 出 版 改行 。 经 国家 新 闻 出 版 署 、 科 技 部 批准 ， 教 育 部 主管 ， 教 育 部 科技 发 展 中 心 主 
办 ， 中 国教 育 和 科研 计算 机 网 (CERNET) 承 办 的 国家 级 权威 科技 期 刊 《 中 国教 育 网 络 》 正 式 出 版 发 行 . 


立足 教育 网 络 ， 服 务 于 教育 信息 化 ，《 中 国教 育 网 络 》 关 注 和 解读 国家 信息 化 发 展 政 策 ， 全 面 报道 中 国教 育 网 络 建设 现状 及 成 
就 ， 研 究 探讨 教育 网 结 建 设 的 经 验 与 | 同 题 。 介 绍 国际 上 先进 的 网 络 技术 、 理 念 ， 及 时 报道 相关 政策 及 重大 事件 ， 广 泛 反映 围绕 教育 
信息 化 的 各 种 重大 应 用 及 重大 事件 ， 为 领导 、 专 家 、 师 生 及 技术 人 员 提 供 借鉴 。 


依托 高 校 及 社会 各 界 的 优秀 专家 ，《 中 国 禾 育 网 络 》 突 出 权威 性 、 政 策 性 、 前 瞎 性 ， 为 专家 及 业界 人 士 提供 一 个 权威 的 交流 与 
欧 通 平台 ，《 中 国教 育 网 络 》 已 成 为 中 国 最 具 影响 力 、 权 威 性 的 专业 期 刊 , 是 与 中 国教 育 信息 化 同步 发 展 的 核心 媒体 。 


目标 


她 络 保 持 教育 信息 化 领域 第 一 品牌 的 市 场地 位 
成 为 与 中 国教 育 信息 化 同步 发 展 的 核心 媒体 


定位 


中 国教 育 网 络 领 域 的 综合 杂志 
一 一 全 面 反映 教育 网 络 研究 、 建 设 、 管 理 及 应 用 、 文 化 、 产 业 化 的 成 就 及 重大 事件 . 
AN 
托 政府、 教育 界 、IT 产 业界 专家 ， 专 注 于 教育 网 络 领 城 ， 制 作 高 水 谁 的 内 容 。 
i 
一 一 以 创新 、 深 入 的 视角 报道 教育 信息 化 的 进展 和 变化 。 
影响 高 端 人 士 ， 成 为 教育 信息 化 宣传 队 
一 服务 于 救 育 网 络 的 研究 、 建 设 与 使 用 者 ， 通 过 对 高 端 人 群 的 影响 ， 确 立 自 己 作为 教育 信息 化 权威 窗口 的 地 位 。 


杂志 优势 
强 有 力 的 政府 指导 





在 教育 部 及 相关 部 门 的 指导 下 ， 及 时 准确 地 传 过、 贯彻 教育 信息 化 发 展 的 方针 、 政 策 、 法 规 等， 保证 中 国 玫 育 网 络 健康 发 展 , 
推动 教育 网 络 建议 与 应 用 . 


权威 的 专家 队伍 


依托 CERNET 及 教育 信息 化 领域 最 权威 的 专家 组 成 的 编辑 委员 会 ，《 中 国教 育 网 络 》 将 为 读者 提供 高 水 准 的 内 容 ， 为 工作 提供 
高 起 点 的 业务 及 技术 指导 ， 


影响 未 来 的 用 户 群 
《中 国教 育 网 络 》 用 户 群 以 教育 领域 从 事 互 联网 建设 及 应 用 的 领导 、 专 家 、 教 师 、 科 研 人 员 为 主 ， 在 该 领域 具有 强大 的 影响 


遍布 全 国 的 渠道 


依托 各 地 方 教 委 及 CERNET，《 中 国教 育 网 络 》 将 建设 遍布 全 国 的 记者 站 ， 伞 随 教育 网 络 的 建设 及 拓展 ， 中 国教 育 网 络 在 为 读 
者 服务 的 同时 ， 也 将 不 断 福 大 自己 的 渠道 网 络 。 


图 1-4-1 《中 国教 育 网 络 ) 杂 志 简 介 页 面 


在 div 中 插入 h3 标记 ,内 容 为 >> 推荐 阅读 ”。 然 后 插入 1 个 ul 标记 ,插入 6 个 列表 项 ， 
分 别 设置 为 超 链接 。 列 表 项 内 容 分 别 如 下 : 
CosT 论坛 “迎新 ”系列 视频 讲座 ,技术 应 用 升级 百 所 高 校 IPv6 蝶 变 、 教 育 信息 化 关注 “十 二 五 ”规划 、 


2010 下 一 代 互联 网 发 展 和 应 用 论坛 .教育 信息 化 服务 器 应 用 突破 壁垒 、 强 调 应 用 移动 IPv6 发 展 空间 
无 限 。 


加 插入 id 为 div3 的 div, 第 3 个 子 div 应 用 导入 样式 表 。 样 式 定义 格式 如 下 : 


#div3{padding - left:40px;font — size:14px;clear:both;} 


在 第 3 个 子 div 中 插入 3 个 段落 。 内 容 分 别 如 下 所 示 : 


2004 年 12 月 《中 国教 育 网 络 )} 杂 志 正 式 出 版 发 行 。 经 国家 新 闻 出 版 署 、 科 技 部 批准 ,教育 部 主管 , 教 
育 部 科技 发 展 中 心 主办 ,中 国教 育 和 科研 计算 机 网 (CERNET) 承 办 的 国家 级 权威 科技 期 刊 (中 国教 育 网 络 》 
正式 出 版 发 行 。 

立足 教育 网 络 ,服务 于 教育 信息 化 《中 国教 育 网 络 》 关 注 和 解读 国家 信息 化 发 展 政策 , 全面 报道 中 国 
教育 网 络 建设 现状 及 成 就 ,研究 探讨 教育 网 络 建设 的 经 验 与 问题 。 介 绍 国际 上 先进 的 网 络 技术 、 理 念 ,及 
时 报道 相关 政策 及 重大 事件 ,广泛 反映 围绕 教育 信息 化 的 各 种 重大 应 用 及 重大 事件 ,为 领导 ,专家 、 师 生 及 
技术 人 员 提 供 借鉴 。 

依托 高 校 及 社会 各 界 的 优秀 专家 中国 教育 网 络 } 突 出 权威 性 政策 性 .前 瞻 性 ,为 专家 及 业界 人 士 提 
供 一 个 权威 的 交流 与 沟通 平台 。《 中 国教 育 网 络 ) 已 成 为 中 国 最 具 影 响 力 、 权 威 性 的 专业 期 刊 ,是 与 中 国教 
育 信 息 化 同步 发 展 的 核心 媒体 。 


@ 插 入 id 为 div4 的 div, 第 4 个 子 div 应 用 链接 外 部 样式 表 。 格 式 如 下 所 示 : 


< link type = "text/css" rel = "stylesheet" href = "layout_link.css"/> 


在 外 部 样式 layout_link. css 定义 #div4 样式 。 定 义 格 式 如 下 所 示 : 


#div4A{width:100 % ;height:160px;margin:10px auto; padding — left:40px;} 


在 #div4 中 分 别 搬入 3 个 h3 标记 ,内 容 分 别 为 “目标 “定位 “杂志 优势 "。 然 后 插入 2 
个 定义 列表 。 内 容 如 下 所 示 : 


<dl> 
< dd> 始 终 保持 教育 信息 化 领域 第 一 品牌 的 市 场地 位 </dd> 
<dd> 是 与 中 国教 育 信息 化 同步 发 展 的 核心 媒体 </dd> 
</dl> 
<dl> 
< dt > 中 国教 育 网 络 领域 的 综合 杂志 </dt > 
<dd> 一 一 全 面 反映 教 育 网 络 研 究 、 建 设 .管理 及 应 用 、 文 化 .产业 化 的 成 就 及 重大 事件 。 
</dd>< dt > 受 人 尊敬 的 专业 权威 杂志 </dt> 
< dd> 一 一 依托 政府 、 教 育 界 、IT 产业 界 专 家 , 专注 于 教育 网 络 领 域 , 制作 高 水 准 的 内 容 。 
</dd><dt> 创 新 IT 媒体 服务 </dt > 
<dd> 一 一 以 创新 ,深入 的 视角 报道 教育 信息 化 的 进展 和 变化 。</dd> 
<dt > 影响 高 端 人 士 ,成 为 教育 信息 化 宣传 队 </dt> 
<dd> 一 一 服务 于 教育 网 络 的 研究 ,建设 与 使 用 者 ,通过 对 高 端 人 群 的 影响 ,确立 自己 作为 教 
育 信 息 化 权威 窗口 的 地 位 。</dd> 
</dl> 


在 #div4 中 最 后 插入 若干 个 段落 。 段 落 的 内 容 分 别 如 下 : 
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在 教育 部 及 相关 部 门 的 指导 下 , 及 时 准确 地 传达 、 贯 彻 教育 信息 化 发 展 的 方针 、 政 策 、 法 规 等 , 保 
证 中 国教 育 网 络 健康 发 展 ,推动 教育 网 络 建设 与 应 用 。 
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权威 的 专家 队伍 

依托 CERNET 及 教育 信息 化 领域 最 权威 的 专家 组 成 的 编辑 委员 会 ,《 中 国教 育 网 络 ) 将 为 读者 提供 
高 水 准 的 内 容 ,为 工作 提供 高 起 点 的 业务 及 技术 指导 。 

影响 未 来 的 用 户 群 

《中 国教 育 网 络 ) 用 户 群 以 教育 领域 从 事 互联 网 建设 及 应 用 的 领导 ,专家 ,教师 .科研 人 员 为 主 , 
在 该 领域 具有 强大 的 影响 力 。 

遍布 全 国 的 渠道 

依托 各 地 方 教委 及 CERNET, 《中 国教 育 网 络 ) 将 建设 遍布 全 国 的 记者 站 ,伴随 教育 网 络 的 建设 及 
拓展 ,中 国教 育 网 络 在 为 读者 服务 的 同时 ,也 将 不 断 壮大 自己 的 渠道 网 络 。 


(5) 在 头 部 head 中 插入 style 标记 ,在 其 中 定义 相关 规则 。 格 式 如 下 所 示 : 


< style type = "text/css"> 
@ import url("layout import. css"); 
* {font — size:14px;} 
p{text - indent:2em;line ~ height:1.2em;} 
, div2 {width: 100 % ; background: # FOFOFO; height: 120px; line - height:1. 5em; padding: 10px 
auto;} 
li{float:left;width:250px;margin:0px 5px;} 
span{color:red;} 
a:hover{text - decoration:underline; color:red;} 
a:link,a:visited, a:active{ text - decoration:none;color:black;} 
h3,dt{padding - left:2em;} 
</style> 


(6) 完成 代码 设计 后 ,通过 查看 网 页 ,观看 页 面 效果 ,如 图 1-4-1 所 示 。 
项 目 15 设计 京东 商品 导购 页 面 


1. 实 训 要 求 

通过 设置 元 素 的 margin( 边 界 ) border( 边 框 ) .padding( 填 充 ) .content( 内 容 ) 等 相关 属 
性 ,设计 京东 商品 导购 页 面 。 

2. 实 训 内 容 

(1) 图 层 的 定义 与 样式 应 用 。 

(2) 图 层 . 图 像 、 标 题字 、 超 链接 等 标记 CSS 属性 的 设置 。 

(3) 内 部 样式 表 的 定义 与 使 用 。 

(4) CSS 盒 模 型 的 margin border padding ,content 等 属性 的 设置 与 应 用 。 

3. 实 训 所 需 知 识 点 

(1) 图 层 div 标记 





<div class= "divl" id= "div2"></div> 


(2) 样式 style 标记 


< style type = "text/css"> 
body{ text - align:center; } 
</style> 


(3) 图 像 img 标记 

< img src= "image41 -1.jpg" alt="[Vinhas] 彩 色 斑马 系列 单 肩 包 黑色 " > 
(4) 标题 h3 标记 

<h3 > 京东 商品 导购 </h3 > 

(5) 超 链 接 a 标记 


<a href ="#">< img src= "image41 -5.jpg" alt =""></a> 


4. 页 面 结构 分 析 

整个 页 面 由 7 个 图 层 、1 个 标题 字 、6 个 图 像 超 链接 构成 。 外 围 的 图 层 中 包含 6 个 子 图 
层 ,每 个 子 图 层 中 包含 1 个 图 像 超 链接 。 对 页 面 中 各 个 元 素 进行 CSS 属性 设置 ,重点 学 会 
margin、border、padding content 等 属性 的 综合 设置 。 

5. 实 训 过 程 与 指导 

编程 实现 (京东 商品 导购 ) 页 面 ,具体 步骤 如 下 : 

(1) 文档 结构 的 创建 

@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程序 名 称 为 prj_4_2. html。 格 式 如 下 : 


二 一 一、 和 :25btal = 一 > 


@ 保存 文件 。 输 入 文件 名 为 prj_4_2. html, 选 择 编码 类 型 为 UTF-8 ,然后 保存 文件 。 

(2) 页 面 内 容 设计 

参照 页 面 结构 分 析 , 分 别 在 body 标记 中 插入 1 个 div, 并 在 div 中 分 别 插入 1 个 h3、6 
个 div 标记 .6 个 图 像 超 链接 。 

插入 1 个 div,id 为 *div0”。 

@ 在 div0 图 层 内 插入 1 个 h3 标题 字 , 内 容 为 “京东 商品 导购 ”。 

@ 在 每 个 子 div 中 分 别 插入 1 个 图 像 超 链接 。 子 div 的 id 分 别 为 divl、div2、div3、 
div4、div5、div6。 图 像 文件 名 分 别 为 image41-1. jpg、 image41-2. jpg、 image41-3. jpg、 
image41-4. jpg、image41-5. jpg、image41-6. jpg。 格 式 如 下 所 示 : 

<div id= "divl" class=""> 


<a href ="#">< img src = "image41 -1.jpg" alt="[Vinhas] 彩 色 斑马 系列 单 肩 包 黑色 " ></a> 
</div> 





@ 内 容 设计 完成 后 ,保存 页 面 , 并 查看 页 面 , 初 始 页 面 效果 如 图 1-4-2 所 示 。 
(3) 表现 设计 
在 style 标记 中 分 别 定 义 img、 图 层 、 超 链接 、h3 等 标记 的 样式 。 


Q@ 定义 img 样式 。img 标记 样式 为 宽度 186px、 高 度 205px。 | 
@ 定义 父 div 样式 。#div0 样式 为 宽度 720px、 高 度 600px, 边 框 宽度 为 1px、 实 线 . 边 | 4 
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框 颜色 为 #0099FF ,边界 上 下 为 0、 左 右 为 自动 .内 容 水 平 居 中 对 齐 。 

@ 定义 标题 h3 样式 。h3 标记 样式 为 内 容 水 平 居中 .字体 大 小 为 32px、 颜 色 为 红色 。 

@ 定义 6 个 子 图 层 样式 。 井 div1、# div2、 并 div3、# div4、# div5、 井 div6 的 样式 统一 为 
上 下 边界 左右 边界 均 10px\ 边 框 为 1px、 线 型 为 双 线 、 颜 色 为 9999CC、 向 左 浮动 .内容 水 
平 、 垂 直 均 居中 显示 ,宽度 208px、 高 度 225px。 

@ 定义 图 层 中 超 链 接 所 包含 的 img 的 样式 。div a img 样式 为 边框 粗细 为 10px、 线 型 
为 groove、 边 框 颜色 为 #9999CC。 

@ 定义 图 层 中 超 链接 盘旋 时 img 的 边框 样式 。div a: hover img 样式 为 边框 粗细 为 
10px、 线 型 为 dashed ,边框 颜 色 为 #9999CC。 

(4) 保存 并 查看 网 页 

设计 完成 后 通过 浏览 器 观看 页 面 效果 ,如 图 1-4-3 所 示 。 
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1. 设计 “ 文 轩 图 书 榜 ”页 面 ,效果 如 图 1-4-4 所 示 。 要 求 如 下 : 

(1) 页 面 标题 为 “ 文 轩 图 书 榜 ”。 

(2) 页 面 内 容 为 1 个 标题 .3 个 图 层 ,其 中 1 个 图 层 中 包含 2 个 并 列 的 子 图 层 。 第 1 个 
子 图 层 插入 1 幅 图 像 image4-3. jpg. 第 2 个 子 图 层 插 入 1 个 无 序列 表 。 列 表 项 的 内 容 分 别 
如 下 : 


。 9 古 汉语 常 用 字 字 典 (第 4 版 ) 

。 (13 条 评论 ) 

。 王 力 等 原著 者 2005 年 07 月 商务 印 书馆 

。 本 书 由 著名 语言 学 家 王 力 、 岑 鹿 祥 、 林 春 、 戴 澧 . 唐 作 藩 、 蒋 绍 思 等 十 余 位 专家 学 者 编写 ,是 学 习 古 
汉语 的 必 备 工具 书 。 

。 购买 收藏 25.60 元 (8.0 折 ) 定价 : ¥32.00 元 


外 图 层 # div3 样式 为 “宽度 900px、 高 度 150px、 边 框 宽度 1px、\ 实 线 、 边 框 颜色 #FOFOF0、 
向 左 浮动 ”。 

第 1 个 子 图 层 # divl 样式 为 * 边 距 5px、 宽 度 160px、 高 度 150px、 边 框 宽度 1px、 实 线 、 
边框 颜色 #E0OEOE0、 向 左 浮动 。 

第 2 个 子 图 层 # div2 样式 为 “宽度 700px、 高 度 150px”; 第 2 个 子 图 层 内 的 无 序列 表 ul 
标记 样式 为 去除 列表 项 前 的 符号 ”; 列表 项 的 行 高 为 "1.5 倍 ”; 第 1 个 列表 项 中 的 “9” 的 
span 标记 spl 类 样式 为 “背景 色 #FF0033 ,颜色 白色 、 宽 度 10px、 高 度 10px”;“ 古 汉语 常用 
字 字 典 (第 4 版)” 的 span 标记 的 sp2 类 样式 为 “字体 特 粗 .大 小 16px、 黑 体 ”; 第 3 个 列表 项 
中 的 “商务 印 书馆 ”span 标记 sp3 类 样式 为 “颜色 #FF0033 字体 特 粗 、 字 大 小 16px、 黑 体 ”; 
第 4 个 列表 项 内 段落 首 行 缩 进 2 个 字符 。 第 5 个 列表 项 中 的 “25. 60 元 ”span 标记 的 sp4 类 
样式 为 “颜色 #C0C0C0、 字 体 特 粗 ,大 小 16px、 黑 体 、 有 删除 线 效果 ”。 

(3) 3 号 标题 显示 “ 文 轩 图 书 榜 ”。 
(4) 程序 名 称 为 project_4_1. html。 


c | @ 127.0.0.1:8020/ 清 华 社 -规划 入 村 实验 教材 第 3 版 资源 及 代码 20170526/ 实 训 4/ 实 训 4- 代 码 /project_4_Lhtml?_hbt=15.. 会 | 3 


文 轩 图 书 榜 








回 二 汉语 常用 字 字典 (第 4 版) 
放 k 庆 六 (13 条 评论 ) 
于 力 等 原著 者 2005 年 07 月 商务 印 书馆 


本 书 由 著名 语言 学 家 王 力 、 岭 献 祥 、 林 奏 、 戴 滤 、 唐 作 落 、 乎 绍 思 等 十 
余 位 专家 学 者 编写 ， 是 学 习 古 汉语 的 必 备 工具 书 。 





购买 收藏 25. 60 元 〈 8.0 折 ) 定价 : 闻 32-99 元 














1-4-4 文 轩 图 书 榜 


2. 设计 巴 城 老 街 风 景 页 面 ,效果 如 图 1-4-5 所 示 。 要 求 如 下 : 

(1) 页 面 标题 “ 巴 城 老 街 风景 ”。 

(2) 网 页 内 容 标题 : 3 标题 字 标 记 显示 内 容 * 巴 城 老 街 风景 ", 标 记 样 式 为 “字体 大 小 
48px、1.5 售 行距 、 右 对 齐 、 颜 色白 色 、 背 景 六 009966”。 

(3) 段落 内 容 为 “ 巴 城 老 街 位 于 江苏 的 阳澄湖 。 在 江南 ,人 们 都 喜欢 吃 又 香 又 肥 腻 的 阳 
澄 湖 大 闸 稻 ,大闸蟹 的 产地 就 在 巴 城 。 相 传 第 一 个 吃 螃 蟹 的 人 巴 解 就 是 巴 城 老 街 的 人 。”; 
段落 样式 为 “ 首 行 缩 进 2 个 字符 ,大 小 28px. 行 距 1.5 售 、 字 符 间距 2px、 有 下 面 线 ”。 

(4) 4 张 图 片 文件 名 分 别 为 image42. jpg 一 image45. jpg; 分 别 插入 到 1 个 图 层 div 中 。 
img 标记 样式 为 “宽度 150px、 高 度 100px、 边 框 宽度 20px、 样 式 inset`\ 边 框 颜色 #006633;”。 





DIV 十 CSS 综合 运用 


全 里 将 
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1-4-5” 巴 城 老 街 风景 


(5) 图 层 div 的 样式 为 “宽度 为 100% 、 高 度 为 160px、 向 左 浮动 ”。 
(6) 程序 名 称 为 project_4_2. html。 








实 训 5 DIV 十 CSS 布局 规划 


【 实 训 目标 】 

(1) 熟悉 常见 网 页 布局 结构 类 型 。 

(2) 能 够 对 主流 商业 网 站 布局 结构 进行 分 析 。 

(3) 综合 运用 DIV 十 CSS 对 小 型 网 站 页 面 进行 布局 规划 、 编 写 代 码 实现 布局 效果 。 
【 实 训 内 容 】 

(1) 使 用 CSS 对 DIV 进行 样式 定义 ,实现 图 层 定 位 与 布局 。 

(2) 利用 CSS 的 float 属性 来 实现 图 层 中 多 个 子 图 层 的 水 平 排列 。 
(3) 使 用 DIV 十 CSS 完成 常见 的 页 面 布 局 代码 设计 。 

(4) 综合 运用 DIV 十 CSS 技术 模拟 真实 网 站 进行 网 页 仿真 设计 。 
【 实 训 项 目 】 

(1) DIV 十 CSS 页 面 布局 设计 。 

(2) 设计 “2015 年 CERNET 华东 北 地 区 年 会 网 站 ”。 


项 目 16 DIV 十 CSS 页 面 布 局 设计 


1. 实 训 要 求 
(1) 固定 页 面 布局 设计 ,用 DIV CSS 实现 如 图 1-5-1 所 示 的 布局 效果 。 


WW 








see > 
OIC 


图 1-5-1 DIV 十 CSS 固定 型 页 面 布局 之 一 
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(2) 用 DIV 十 CSS 完成 如 图 1-5-2 所 示 的 页 面 布 局 效果 。 





图 1-5-2 ”DIV 十 CSS 固定 型 页 面 布局 之 二 
(3) 弹性 页 面 布局 设计 。 所 谓 “ 弹 性 ”是 指 宽度 与 高 度 的 单位 为 百分比 ,而 不 是 具体 的 








2 列 左 侧 固定 右 侧 自 适 应 完 度 ， 指 定 高 度 + 头 部 + 导航 + 尾部 








图 1-5-3 DIV 十 CSS 弹性 页 面 布局 


2. 实 训 内 容 

(1) DIV 创建 与 DIV 嵌 套 。 
(2) DIV 属性 的 设置 与 应 用 。 
(3) DIV 样式 引用 方法 。 

(4) 外 部 样式 表 的 定义 与 引用 。 
3. 实 训 所 需 知识 点 

(1) 图 层 div 标记 


< div style= "position: absolute; left:10px;top:10px;width:100px; height:100px; 


background: red;"> </div> 


(2) 链接 link 标记 


< link type = "text/css" rel = "stylesheet"” href = "外 部 样式 表 文件 名 称 " /> 


(3) 样式 style 标记 
<style type= " "> 


@import url(" 外 部 样式 表 文 件 名 称 ") ; 
</style> 


4. 页 面 结构 分 析 


网 站 首页 设计 一 般 采 用 DIV 十 CSS 结构 进行 布局 ,通常 页 面 DIV 结构 如 图 1-5-4 所 示 。 


#webpage{}+ 














1-5-4 一 般 网 页 布局 DIV 结构 图 


(1) HTML 代码 中 DIV 结构 规划 


<div id = "webpage"> <! -- 页 面 层 容器 --> 
<div id= "head"> </div><! -- 页 面 头 部 --> 
<div id= "mainbody"> ”<!-- 页 面 主体 --> 
<div id= "sidebar"><! -- 侧 边栏 --> </div> 
<div id= "main"> ”<! -- 主体 内 容 --> </div> 
</div> 
<div id= "footer"> <! -- 页面 底部 -- > </div> 
</div> 


DIV 十 CSS 布局 规划 


号 将 
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(2) 编写 外 部 样式 表 css. css 


/x css.css*/ 
/* 基本 信息 */ 
body{font:12px Tahoma; margin:0px; text— align:center; background: # FFFFFF;} 
/x* 页 面 样式 */ 
#webpage{width:100 % ;} 
/* 页 面 头 部 样式 */ 
# head {width:800px;margin:0 auto; height :100px;background: # FFCC99;} 
/* 页 面 主体 样式 */ 
#mainbody{ width:100 % ; margin:8px auto; } 
# sidebar{ background: #99CC33; width:25 % ; text — align:left; float:left; 
overflow:hidden; } 
#main{ background: #66FF66; width:75% ; text — align:left; float:right; 
overflow:hidden; } 
#footer{ margin:0 auto; width:800px; height:50px;background: #00FFFF; clear:both; } 


(3) 链接 外 部 样式 表 


< link href = "css.css" rel = "stylesheet" type = "text/css" /> 


5. 实 训 过 程 与 指导 

编程 分 别 实 现 图 1-5-1、 图 1-5-2 和 图 1-5-3 所 示 的 布局 效果 。 以 图 1-5-1 为 例 ,具体 步 
又 如 下 : 

(1) 文档 结构 的 创建 

@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 软件 ,新建 HTML 网 页 ， 
在 首 行 插入 注释 语句 , 注 明 程序 名 称 为 prj_5_1_1. html。 格 式 如 下 : 


ER 一 一 之 


@ 保存 文件 。 输 入 文件 名 为 ptj_5_1_1. html, 选 择 编码 类 型 为 UTF-8, 然 后 保存 
文件 。 

(2) 页 面 内 容 设计 

参照 图 1-5-1 所 示 的 页 面 结构 分 析 ,分别 在 body 标记 中 插入 8 个 div, 并 在 div 中 插入 
相关 提示 信息 。 

@ 在 body 标记 中 插入 父 div, 设 置 id 为 container。 

@ 在 父 div 中 插入 子 div, 设 置 id 为 header, 内 容 为 “这 是 头 部 信息 区 ”。 

@ 在 父 div 中 插入 子 div, 设 置 id 为 nav, 内 容 为 “这 是 导航 信息 区 ”。 

@ 在 父 div 中 插入 子 div, 设 置 id 为 maincontent ,内容 中 包含 2 个 子 div,2 个 子 div 的 
id 分 别 为 main、side, 内 容 分 别 为 “这 是 主体 信息 区 ”“ 这 是 右 侧 信息 区 ”。 

@ 在 父 div 中 插入 子 div, 设 置 class 为 clearfloat, 内 容 为 空 , 用 于 清除 图 层 浮动 。 

@ 在 父 div 中 插入 子 div, 设 置 id 为 footer; 内 容 为 “这 是 版 权 信息 区 ”。 


(3) 表现 设计 
g@ 在 head 标记 中 插入 link 标记 ,链接 外 部 样式 表 , 格 式 如 下 所 示 : 


< link href = "layout_1. css" rel = "stylesheet" type= "text/css" /> 


@ 创建 外 部 样式 文件 layout_1. css。 

@) 在 layout_l. css 文件 中 分 别 定义 全 局 样式 及 各 div 样式 。 具 体 样式 定义 描述 如 下 : 

。 全 局 样式 定义 为 边界 上 下 为 0px\ 左 右 为 自动 .字体 特 粗大 小 28px. 行 高 1. 5em。 

。 ##container 样式 为 宽度 900px、 边 界 上 下 为 0px\ 左 右 为 自动 。 

。 #header 样式 为 高 度 70px、 背 景 颜色 并 CCFFCC、 底 边界 8px。 

。 井 nav 样式 为 高 度 40px、 背 景 颜色 并 CCFFCC、 底 边界 8px。 

. maincontent 样式 为 底 边 界 8px。 

。 # main 样式 为 图 层 向 左 浮动 .宽度 664px、 高 度 400px\ 背 景 颜 色 #FFFF99。 

。 # side 样式 为 图 层 向 右 浮动 、 宽 度 228px、 高 度 400px\ 背 景 颜色 井 FFCC99。 

。 .clearfloat 样式 为 清除 图 层 左 、 右 浮动 。 

。 井 footer 样式 为 高 度 70px\ 背 景 颜 色 井 CCFFCC、 顶 边框 为 粗细 8px、 线 型 实 线 、 

白色 。 

(4) 保存 并 查看 网 页 

设计 完成 后 通过 浏览 器 观看 页 面 效 果 , 如 图 1-5-1 所 示 。 

根据 图 1-5-2 和 图 1-5-3 所 示 的 页 面 效 果 ,设计 HTML 代码 的 DIV 结构 ,在 body 标记 
中 插入 相应 的 DIV ,分 别 在 不 同 的 图 层 中 插入 相关 提示 信息 ,根据 页 面 布局 效果 ,参照 
layout_l. css 格式 编写 外 部 样式 文件 layout_2. css、layout_3. css。 格 式 如 下 所 示 : 


®。 /x*layout 2.css*/ 





* {font — weight:bolder;font - size:28px; margin:0;} 
#container{margin:0 auto; width:900px;} 

# header{height:100px; background: # 6CF;margin — bottom:5px;} 
#mainContent{margin - bottom: 5px;} 

# sidebar{float:left;width:200px; height:500px;background: # 9FF; } 
#content{float:right;width:695px; height :500px; background: # cFF;} 


* /x layout_3.css */ 


x* {padding:0px;margin:0 auto;font - weight :bolder;font - size:24px;} 
#container{width:100% ;} 

# header{height:100px;background: #99CC66; margin - bottom: 5px; } 

# menu {height :30px;background: #669933;margin — bottom:S5px; } 
#mainContent{margin - bottom:S5px; height:350px;} 

# sidebar{float:left; height:350px;background: # CCEF99;} 
#content{margin - left:205px ;height:350px; background: # FFFFAA; } 
# footer{height :60px; background: #99CC66;} 
.Clearfloat{clear:both; } 


中 旦 六 
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项 目 17 设计 2015 年 CERNET 华东 北 地 区 年 会 网 站 


1. 实 训 要 求 
(1) 运用 DIV 十 CSS 进行 页 面 布局 ,模仿 http://it2015. sd. edu. cn/ 网 站 构建 一 个 完 则 
的 2015 年 CERNET 华东 北 地 区 年 会 网 站 ,如 图 1-5-5 所 示 。 


nr 
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© 2015 ao 














图 1-5-5 2015 年 CERNET 华东 北 地 区 年 会 网 站 首页 


(2) 学 会 使 用 4 种 样式 表 分 别 对 页 面 中 的 文字 、 段 落 、 图 像 等 元 素 进行 样式 定义 。 
(3) 学 会 创建 DIV 与 设置 DIV 的 属性 。 

(4) 学 会 编写 外 部 样式 表 文件 ,并 链接 到 HTML 文档 中 。 

2. 实 训 内 容 

(1) 使 用 DIV 十 CSS 布局 技术 年 会 网 站 页 面 布 局 。 

(2) 设计 网 站 首页 和 二 级 导航 页 面 的 菜单 。 

(3) 定义 图 层 和 图 层 能 套 。 

(4) 定义 并 引用 内 部 样式 表 、 外 部 样式 表 。 

3. 实 训 所 需 知识 点 

(1) 图 层 div 标记 


<div id= "divl" class=" div2"> … </div> 
(2) 链接 link 标记 


< link type = "text/css" rel = "stylesheet" href = "layout link.css"/> 


(3) 样式 style 标记 


< style type = "text/css"> 

@ import url("layout_ import. css"); 

#nav{background: # 209060;width:100 % ;line— height:40px;color: white; } 
</style> 


(4) 无 序列 表 ul 标记 


<ul> 

<1i> 首 页 </1i> 

<1i> 会 议 介绍 </1i> 
</ul> 


(5) 表格 table 标记 
<table> 
0 
<td><a href ="#"> 在 线 注册 </a></td>< td> gnbsp;</td> 


</tr> 
</table> 


(6) 浮动 框架 iframe 标记 
< iframe id= "baidu" src = "http://it2015. sd. edu. cn/bigbaidu. html" ></iframe> 


(7) 首页 飘动 窗口 设计 
QO 定义 飘动 图 层 div,id 为 gg3, 在 div 中 插入 图 像 超 链接 ,并 设置 目标 URL。 
<div id = "gg3" style = "width:170px;height:55px;"> <a target ="_parent" href = "http:// 


it2015. sd. edu. cn/tbtx. html">< img src = "images/tx. jpg" width= "170" height = "55" alt = ""/> 
</a> </div> 


@ 在 body 中 插入 JavaScript 脚本 ,启动 运行 程序 。 


< script type = "text/javascript"> 


var ad3 = new AdMove( "gg3"); // 定 义 AdMove 对 象 
ad3. Run( ); // 启 动 运行 
</script > 


@ 在 head 标记 中 定义 JavaScript 相关 函数 。 


< script type = "text/javascript"> 
function addEvent (obj, evtType, func, cap){ 
cap= cap| |false; 
if(obj.addEventListener){ 


中 呈 将 
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obj.addEventListener(evtType, func, cap); 
return true; 
jelse if(obj.attachEvent){ 
if(cap){ 
obj. setCapture( ); 
return true; 
}else{ 
return obj. attachEvent("on”+ evtType, func); 
} 
}else{ 
return false; 
} 
} 
function getPageScroll(){ 
Var xScroll, yScroll; 
if (self.pageXOffset) { 
xScroll = self.pageXOffset; 
} else if (document. documentElement && document. documentElement. scrollLeft){ 
xScroll = document. documentElement. scrollLeft; 
} else if (document. body) { 
xScroll = document. body. scrollLeft; 
] 
if (self.pageYOffset) { 
YScroll = self.pageYOffset; 
} else if (document, documentElement && document. documentElement. scrollTop){ 
YScrol1l = document. documentElement. scrollTop; 
} else if (document. body) { 
YScroll = document. body. scrollTop; 
} 
arrayPageScroll = new Array(xScroll,yScroll); 
return arrayPageScroll; 
; 
function GetPageSize( ){ 
Var xScroll, yScroll; 
if (window. innerHeight && window. scrollMaxY) { 
xScroll = document. body. scrollWidth; 
YScroll = window. innerHeight + window. scrollMaxY; 
} else if (document. body. scrollHeight > document. body. offsetHeight){ 


xScroll = document. body. scrollWidth; 

YScroll = document. body. scrollHeight; 
} else{ 

xScroll = document. body. offsetWidth; 


YScroll = document. body. offsetHeight; 
}; 
Var windowWidth, windowHeight; 
if (self. innerHeight) { 
windowWidth = self. innerWidth; 
windowHeight = self. innerHeight; 
} else if (document. documentElement && document. documentElement. clientHeight) { 
windowWidth = document. documentElement. clientWidth; 


windowHeight = document. documentElement. clientHeight; 
} else if (document.body) { 
windowWidth = document. body. clientWidth; 
windowHeight = document. body.clientHeight; 
} 
if(yScroll < windowHeight){ 
pageHeight = windowHeight; 
} else{ 
pageHeight = yScroll; 


} 
if(xScroll < windowWidth){ 
pageWidth = windowWidth; 
} else1{ 
pageWidth = xScroll; 
. 


arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight) 


return arrayPageSize; 


var AdMoveConfig = new Object(); 
AdMoveConfig. IsInitialized = false; 
AdMoveConfig. ScrollX= 0; 
AdMoveConfig. ScrollY = 0; 
AdMoveConfig. MoveWidth = 0; 
RdMoveConfig, MoveHeight = 0; 
AdMoveConfig. Resize = function( ){ 
var winsize = GetPageSize( ); 
AdMoveConfig. MoveWidth = winsize[2]; 
AdMoveConfig. MoveHeight = winsize[3]; 
AdMoveConfig. Scroll(); 
: 
AdMoveConfig. Scroll = function(){ 
var winscroll = getPageScroll(); 
AdMoveConfig. ScrollX = winscroll[0]; 
AdMoveConfig. ScrollY = winscroll[1]; 
} 
addEvent (window, "resize", AdMoveConfig. Resize); 
addEvent (window, "scroll", AdMoveConfig. Scroll1); 
function AdMove( id){ 
if(!AdMoveConfig. IsInitialized){ 
AdMoveConfig. Resize( ); 
AdMoveConfig. IsInitialized = true; 
} 
Var obj = document. getElementById( id); 
obj. style. position = "absolute"; 
var W= AdMoveConfig. MoveWidth — obj. offsetWidth; 
var H= AdMoveConfig. MoveHeight - obj. offsetHeight; 
var x = Wx Math.random(),y = H* Math. random(); 
var rad = (Math. random() + 1) * Math. PI/6; 
Var kx = Math. sin(rad), ky = Math. cos(rad); 


var dirx = (Math.random()<0.5?1:—1), diry = (Math. random()<0.5?1:—1); 


DIV 十 CSS 布局 规划 


将 


号 


Web 前 端 开 发 技术 实验 与 实践 一 一 日 TML5、CSS3、JavaScript( 第 3 乒 ) 





Var step = 1; 
var interval; 
this. SetLocation = function(vx,vy){x= vx;y= vy;} 
this. SetDirection = function(vx, vy){dirx= vx;diry= vy;} 
obj. CustomMethod = function( ){ 
obj. style. left = (x + RdMoveConfig.ScrollX) + "px"; 
obj. style. top = (y + RdMoveConfig.ScrollyY) + "px"; 
rad = (Math. random() + 1) * Math. PI/6; 
W= AdMoveConfig. MoveWidth — obj. offsetWidth; 
H= AdMoveConfig. MoveHeight — obj. offsetHeight; 
X= XxX+ stepxkx*dirx; 
if (x<0){dirx = 1;x = 0;kx= Math. sin(rad);ky= Math.cos(rad);} 
if (x>W){dirx = -1;x = Wikx=Math.sin(rad);ky= Math.cos(rad);} 
Y= y+ stepxkyx*diry; 
if (y<0){diry = 1;y = 0;kx= Math. sin(rad);ky= Math. cos(rad);} 
if (y> H){diry = -1;Y = H;kx= Math. sin(rad);ky= Math. cos(rad);} 


this. Run = function(){ 
Var delay = 10; 
interval = setInterval (obj. CustomMethod, delay); 
obj. onmouseover = function(){clearInterval( interval);} 
obj. onmouseout = function( ) { interval = setInterval (obj. CustomMethod, delay);} 
} 


</script > 
4. 页 面 设计 要 求 


页 面 布局 结构 如 图 1-5-6 所 示 , 将 页 面 分 成 header、nav menu、mainbody( 分 为 main、 
rightbar 左 、 右 两 个 子 div) ,footer 等 区 域 。 





header 





nav menu 





main rightbar 





footer 











图 1-5-6 CERNET 华东 北 地 区 年 会 网 站 布局 图 


5. 实 训 过 程 与 指导 

编程 实现 2015 年 CERNET 华东 北 地 区 年 会 网 站 ,具体 步 又 如 下 : 

(1) 文档 结构 的 创建 

g@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程 序 名 称 为 prj_5_2. html。 格 式 如 下 : 


ee 


@ 保存 文件 。 输 入 文件 名 为 prj_5_2. html, 选 择 编码 类 型 为 UTF-8, 然 后 保存 文件 。 


(2) 页 面 内 容 设计 
Q@ 页 面 布 局 规划 。 根 据 图 1-5-6 在 body 标记 中 插入 相关 DIV ,形成 DIV 嵌 套 结构 。 
代码 如 下 所 示 : 


<div id = "container" class=""> 


<div id = "header" class=""> </div> 
<div id= "nav" class = ""> </div> 
<div id= "mainbody" class = ""> 
<div id= "main" class = ""> </div> 
<div id= "rightbar" class=""> </div> 
</div> 
<div id= "footer" class=""> </div> 
</div> 


@ 在 id 为 nav 的 标记 中 插 和 人 无 序列 表 , 设 计 导航 菜单 。 代 码 如 下 : 


<div id= "nav" class=""> 
<ul> 
<1i><a href ="#"> 首 &nbsp; &nbsp; &nbsp;&nbsp; 页 </a></1i> 
<1i><a href = " 间 "> 会 议 介 绍 </a></1i> 
<1i><a href = "#"> 潍 坊 介 绍 </a></1i> 
<1li><a href ="#"> 日 程 安排 </a></1i> 
<1i><a href ="#"> 大 会 报告 </a></1i> 
<1i><a href ="#"> 宾 馆 交 通 </a></1i> 
<1i><a href ="#"> 资 料 下 载 </a></1i> 
<1i><a href ="#"> 会 议 注册 </a></1i> 
<1i><a href = "#"> 联 系 我 们 </a></1i> 
</ul> 
</div> 


@ 在 id 为 main 的 标记 中 插入 相应 的 段落 ,其 中 标题 “会 议 概要 ”会 议 介绍 “会 议 动 
态 ”“ 宾 馆 地 图 ”统一 应 用 # bt 样式 ,其 格式 如 下 : 


#bt{font - size:28px;padding:2px 16px; font - weight:bold;} 


其 他 段落 内 容 如 下 : 


会 议 概要 

2015 年 CERNET 华东 北 地 区 教育 信息 化 技术 研讨 大 会 

时 间 : 2015 年 4 月 22 日 至 4 月 25 日 

报到 时 间 : 2015 年 4 月 22 日 

地 点 : 山东 省 潍坊 市 

会 议 主题 : 先进 网 络 技术 、 信 息 化 规划 与 学 校 信息 化 实践 、 信 息 技术 推动 教育 教学 变革 、 技 术 应 用 研 
讨 及 工作 交流 等 。 

主办 : CERNET 华东 北 地 区 网 络 中 心 .CERNET 安徽 省 网 络 中 心 .CERNET 山东 省 网 络 中 心 、 山 东 省 教育 技 
术 与 装备 协会 

承办 : 潍坊 医学 院 

会 议 介绍 


中 号 将 
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2015 年 4 月 22 一 25 日 ,由 CERNET 华东 北 地 区 网 络 中 心 .CERNET 安徽 省 网 络 中 心 .CERNET 山东 省 网 络 
中 心 及 山东 省 教育 技术 与 装备 协会 联合 主办 ,潍坊 医学 院 承 办 的 中 国教 育 和 科研 计算 机 网 (CERNET)2015 
年 华东 北 地 区 教育 信息 化 技术 研讨 会 在 美丽 的 山东 省 潍坊 市 召开 。 研 讨 会 主要 议题 包括 先进 网 络 技术 、 
信息 化 规划 与 学 校 信息 化 实践 信息 技术 推动 教育 教学 变革 技术 应 用 研讨 及 工作 交流 等 。 会 议 将 邀请 
CERNET 专家 、 教 育 技 术 专 家 、 部 分 国内 高 校 及 企业 界 专家 作 报 告 。 


@ 在 id 为 rightbar 的 标记 中 ,分 别 插入 id 为 rightbar_up rightbar_ down 的 2 个子 div。 

。 在 id 为 rightbar_up 的 div 中 , 插 和 人 段落 bp, 内容 为 “会 议 动态 ”。 

。 在 id 为 rightbar down 的 div 中 ,插入 3 行 3 列 的 表格 ,表格 中 第 2 列 中 分 别 插入 如 
下 内 容 : 潍坊 天 气 预报 、 在 线 注册 、 修 改 信息 。 将 “潍坊 天 气 预报 ”设置 为 超 链 接 , 格 
式 如 下 所 示 : 


<a href = "http://www. weather. com. cn/weatherld/101120601. shtml”target = " _blank"> 潍 坊 天 气 
预报 </a> 


。 在 id 为 rightbar_down 的 div 中 ,插入 段落 和 浮动 框架 。 代 码 格 式 如 下 : 


<p id= "bt"> 宾 馆 地 图 </p> 
< iframe id= "baidu" height = "180px"width = "200px" frameBorder = "0" scrolling = "no" 
src= "http://it2015. sd. edu. cn/baidu. html" ></iframe> 


@ 在 id 为 footer 的 标记 中 ,插入 1 个 p 标 记 。 内 容 如 下 所 示 : 


<p> &copy;Copyright CERNET 华东 北 地 区 网 络 中 心 。Designed By < a href = "http://nic. wfmc. edu. 
cn" class = "footer"> 浴 坊 医 学 院 网 络 信 息 中心 </a></p> 


@ 完成 上 述 操 作 后 ,整个 页 面 的 内 容 信息 添加 完毕 。 保 存 页 面 ,并 在 浏览 器 中 查看 网 
页 效果 ,如 图 1-5-7 所 示 。 

(3) 表现 设计 

在 style 标记 中 分 别 定 义 div、p、ul\li、a 等 标记 的 样式 ,其 样式 要 求 如 下 所 示 。 

中 定义 最 外 层 div 样式 。# container 样式 为 边界 上 下 0、 左 右 自动 、 宽 度 100%。 

@ 定义 头 部 div 样式 。# header 样式 为 内 容 水 平 居 中 、 宽 度 100%、 高 度 243px\ 背 景 
颜色 #7d26a8、 图 像 header23. png( 在 web 子 目录 下 ) 图像 位 置 居中 顶部 、 不 重复 。 

@ 定义 导航 div 样式 。#narv 样式 为 宽度 100% 高度 40px、 颜 色白 色 , 行 高 40px、 内 容 
水 平 居中 背景 颜色 660066。 

@ 定义 样式 。ul 标记 样式 为 边界 上 下 0 左右 自动 (不 设置 头 部 和 导航 条 之 间 会 有 
空白 带 ) 宽度 950px、 列 表 样 式 类 型 none、 内 容 水 平 居 中 。 

用 无 序列 表 实 现 水 平 导航 菜单 。 关 键 有 两 点 : 消除 无 序列 表 前 面 的 符号 ,将 默认 垂直 
排列 的 菜单 转换 成 水 平 排列 的 菜单 。 

。 消除 列表 项 前 的 符号 ,使 用 列表 样式 ul{list-style-type:none;})。 

。 实现 菜单 水 平 导航 ,使 用 列表 项 样式 li(float:left;}。 

实现 导航 菜单 均匀 显示 有 两 种 方法 : 一 是 通过 设置 列表 项 的 宽度 高度 和 文本 居中 实 
现 , 如 “width:100px;text-align:center;font-size:16px;”; 二 是 通过 设置 每 个 列表 项 的 边界 





| 会 议 概要 

# 2015 年 ahET 人 东北 地 区 教育 信息 化 技术 研讨 大 全 

: 时 间 : 2015 年 4 月 22 日 至 4 月 25 日 

报时 间 。z05 年 月 22 日 

# 地 点 : 山东 省 潍坊 市 

;会议 主 题 。 先进 网 绍 技术 、 信 息 化 规划 与 学 术 信 息 化 立 趴 、 信 息 技术 推动 教育 教学 变革 、 技 术 应 用 计 及 工作 交流 等 。 

| 主办: emer 人 东北 地 区 网 结 中 心 、cEsNeT 安 节省 网 结 中 心 、ceRET 山 东 省 网 络 中 心 、 山 东 省 教育 技术 与 革 备 协会 

也 办: 济 坊 医学 院 

会 议 介绍 

2015 年 ERNET 华 东北 地 区 教育 信息 化 技术 研讨 大 会 

! 时 间 : 2015 年 4 月 22 日 至 4 月 25 日 

报到 时 间 : 201s 年 4 月 2? 昌 

地 点 : 山东 省 潍坊 市 

会 议 主题 : 先进 网 络 技术 、 信 息 化 规划 与 学 校 信息 化 践 、 信 息 技术 推动 才 育 才学 变革 、 技 术 应 用 研讨 及 工作 交流 等 。 
主办 : cERNET 华 东北 地 区 网 络 中 心 、cERNET 安 向 省 网 络 中 心 、cERNETU 东 省 网 络 中 心 、 山 东 省 教育 技术 与 装备 协会 








1-5-7 CERNET 华东 北 地 区 年 会 网 站 初始 页 面 


(margin:0 20px;) 来 实现 ,在 样式 中 追加 属性 值 对 “margin:0px 20px;”。 

@ 定义 中 的 上 i 样式。 li 样式 为 边界 上 下 0、 左右 自动 向 左 浮动 (实现 菜单 水 平 导 
航 ) ,文本 居中 对 齐 、 字 体 大 小 16px、 宽 度 5. 5em, 填 充 上 下 2px、 左 右 8px。 

@ 定义 du 中 的 a 样式 。a 样式 为 字体 大 小 16px、 垂 直 居中 对 齐 、 显 示 方 式 为 块 方式 。 

@ 定义 ul 中 的 a:link al:visited \a:active 样式 。a:link、a:visited、a:active 样式 为 颜色 
为 白色 .字符 装饰 为 无 。 

定义 ul 中 的 a:hover 样式 。a:hover 样式 为 背景 颜色 井 9933 持 文本 居中 对 齐 、 显 示 
方式 为 块 方式 。 

@ 定义 主体 部 分 div 样式 。# mainbody 样式 为 背景 颜色 并 FFFFFF ,填充 上 下 0 ,左右 
自动 ,边界 为 上 下 0 .左右 自动 .宽度 1001px。 

@@ 定义 主体 左 侧 部 分 div 样式 。#main 样式 为 宽度 60% 、 图 层 向 左 浮动 ,填充 上 下 0、 


中 旦 六 
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左右 30px, 边 界 上 下 0 左右 自动 。 

@@ 定义 主体 右 侧 部 分 div 样式 。#rightbar 样式 为 宽度 30% 、 图 层 向 右 浮 动 。 

@@ 定义 版 权 div 样式 。 间 footer 样式 为 背景 颜色 #FFFFFF 清除 图 层 左 右 浮动 ,文本 
居中 对 齐 .字体 大 小 16px.、 行 高 40px。 

(4) 保存 并 查看 网 页 

设计 完成 后 通过 浏览 器 观看 页 面 效 果 , 如 图 1-5-8 所 示 。 


2015' CERNET 华 东北 地 区 教 后 信 





会 议 主题 先进 网 络 : 
革 、 技 术 应 

主办 ，CERIET 华 东 
心 、 山 东 省 教育 技 


承办 ， 潍坊 医学 院 





图 1-5-8 仿真 设计 2015 年 CERNET 华东 北 地 区 年 会 网 站 首页 


(5) 首页 飘动 窗口 设计 
参照 *3. 实 训 所 需 知 识 点 ”中 的 “(7) 首 页 村 动 窗口 设计 ”的 步骤 完成 飘动 窗口 的 添加 , 然 
后 重新 保存 文件 ,并 通过 浏览 器 查看 页 面 效果 ,如 图 1-5-8 所 示 。 


课外 拓展 训练 5 


1. 采用 DIV 十 CSS 设计 页 面 布 局 ,效果 如 图 1-5-9 所 示 。 设 计 要 求 : 

(1) 采用 内 部 样式 表 , 分 别 定义 不 同 的 div 样式 。 

。 定义 全 局 样式 为 字体 标 粗 .大 小 16px、 填 充 和 边界 上 下 均 为 0、 左右 为 自动 。 

。 井 container 样式 为 宽度 100% ,填充 上 下 0 左右 自动 ,边界 为 上 下 0、 左 右 自 动 。 

。 井 header 样式 为 宽度 100%、 高 度 70px\ 背 景 颜色 并 99ff66 ,背景 图 像 为 w3school. 


png ,不 重复 、 居 左上 角 。 

# nav 样式 为 宽度 100%、 高 度 32px\ 背 景 颜色 井 fbfbfb。 导 航 中 无 序列 表 无 符号 、 
水 平 居 中 显示 ,列表 项 为 行内 元 素 , 填 充 上 下 5px\ 左 右 15px。 

井 mainbody 样式 为 宽度 100% 、 高 度 300px, 填 充 上 下 0 \ 左 右 自 动 , 边 界 为 上 下 0\ 左 
右 自 动 。 

#1left 样式 为 图 层 向 左 浮动 ,背景 颜色 #efefef、 宽 度 15% 、 高 度 300px。 其 中 无 序列 
表 为 无 符号 的 列表 ,边界 为 20px。 

井 middle 样式 为 边界 上 下 0 左右 15%、 高 度 300px、\ 首 行 缩 进 2 个 字符 。 

#right 样式 为 图 层 向 右 浮动 ,背景 颜色 间 efefef、 宽 度 15%、 高 度 300px。 

并 footer 样式 为 宽度 100% 、 高 度 50px, 背 景 颜色 # b6b6b6、 内 容 水 平 居中 显示 、 填 
充 为 10px。 

。 井 clearfloat 样式 为 清除 图 层 左 右 浮动 。 

(2) 程序 名 称 为 project_5_1. html。 











在 W3School 的 HTML 教程 中 ， 您 将 学 习 如 何 使 用 HTML 来 创建 站 点 。 
号 光 容易 学习 上 你 会 喜欢 它 的 ! 现在 开始 学 习 HTML ! 


L5 
HTML 5 是 下 一 代 的 HTML. 
HTML5 仍 处 于 完善 之 中 。 然而, 大 部 分 现代 浏览 器 已 经 具备 了 某 些 HTML5 支持 . 
在 W3school 的 HTML 5 教程 中 ， 您 将 了 解 HTML5 中 的 新 特性 。 
现在 就 开始 学 





图 1-5-9 简易 W3School 教程 网 页 面 
附 : 文字 内 容 如 下 : 


导航 菜单 : HTML /CSS JavaScript Server Side、RASP.NET XML 、Web Services Web。 

左 侧 导 航 菜单 : HTML XHTML、HTML 5、CSS、CSS3、TCP/IP。 

右 侧 导航 菜单 : 参考 手册 .HTML/HTML5 ,标签 .CSS 1,2,3、HTML 颜色 .HTML ASCII、HTML Latin 一 1、 
HTML 符号 。 


中 间 图 层 内 容 : 

HTML 系列 教程 

从 左 侧 的 菜单 选择 你 需要 的 教程 ! 实 

ms 区 | 
5 


DIV 二 CSS 布局 规划 


Web 前 端 开 发 投 太 实验 与 实践 一 感 TML5、CSS3、JavaScript( 第 3 版 ) 





HTML 指 超 文本 标签 语言 。 

HTML 是 通 向 Web 技术 世界 的 钥匙 。 

在 W3School 的 HTML 教程 中 ,您 将 学 习 如 何 使 用 HTML 来 创建 站 点 。 

HTML 非常 容易 学 习 ! 你 会 喜欢 它 的 ! 现 在 开始 学 习 HTML ! 

HTML 5 

HTML 5 是 下 一 代 的 HTML。 

HTML5 仍 处 于 完善 之 中 。 然 而 ,大 部 分 现代 浏览 器 已 经 具备 了 某 些 HTML5 支持 。 
在 School 的 HTML 5 教程 中 ,您 将 了 解 HTML5 中 的 新 特性 。 

现在 就 开始 学 习 HTML 5 ! 


2. 设计 “HTML5 简介 ”页 面 , 效 果 如 图 1-5-10 所 示 。 要 求 如 下 : 

(1) 页 面 标题 为 “HTML5 简介 ”。 

(2) 网 页 内 容 标题 : 两 个 标题 字 标 记分 别 显示 “HTML5 是 如 何 起 步 的 ?” 和 “为 
HTML5 建立 的 一 些 规则 : ”。h2 标记 样式 为 字体 加 粗 . 颜 色白 色 、 和 背景 # 006633、 填 
充 10px。 

(3) 第 1 个 标题 下 ,每 行 1 个 段落 ,默认 大 小 和 字体 ; 但 “编者 注 : ”的 样式 为 “加 粗 、 斜 
体 ”; 所 有 段落 向 右 缩 进 2 个 字符 , 行 高 1.5 售 。 

(4) 第 2 个 标题 下 ,是 1 个 无 序列 表 , 采 用 默认 格式 显示 ,但 无 序列 表 也 向 右 缩 进 2 个 
字符 , 行 高 1.5 售 。 

(5) 所 有 内 容 放 在 图 层 中 ,图 层 div 的 样式 为 上 下 填充 20px、 左 右 填 充 10px。 

(6) 程序 名 称 为 project_5_2. html。 
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HTMLS 是 如 何 起 步 的 ? | 


HTML5 是 W3C 与 WHATWG 合作 的 结果 。 
痢 吉 法 : W3C 指 World Wide Web Consortium , 万 维 网 联盟 。 
手相 法 : WHATWG 指 Web Hypertext Application Technology Working Group。 


WHATWG 致力 于 Web 表单 和 应 用 程序 ， 而 W3C 专注 于 XHTML 2.0。 在 2006 年 ， 双 方 决定 进行 合作 ， 来 创建 一 个 
新 版 本 的 HTML。 


为 HTML5 建立 的 一 些 规则 : 


新 特性 应 该 基于 HTML、CSS、DOM 以 及 Javascript。 

减少 对 外 部 插件 的 需求 ( 比如 Flash ) 

更 优秀 的 错误 处 理 

更 多 取代 脚本 的 标记 
HTMLS 应 该 独立 于 设备 


开发 进程 应 对 公众 透明 




















图 1-5-10 HTML5 简介 











附 : 文字 内 容 如 下 : 


HTML5 是 如 何 起 步 的 ? 

HTML5 是 W3C 与 WHATWG 合作 的 结果 。 

编者 注 : W3C 指 World Wide Web Consortium, 万 维 网 联盟 。 

编者 注 : WHATWG 指 Web Hypertext Application Technology Working Group。 

WHATWG 致力 于 Web 表单 和 应 用 程序 ,而 W3C 专注 于 XHTML 2.0。 在 2006 年 , 双方 决定 进行 合作 ,来 创 
建 一 个 新 版 本 的 HTML。 

为 HTML5 建立 的 一 些 规则 : 

新 特性 应 该 基于 HTML、CSS、DOM 以 及 JavaScript。 

减少 对 外 部 插件 的 需求 (比如 Flash) 

更 优秀 的 错误 处 理 

更 多 取代 脚本 的 标记 

HTML5 应 该 独立 于 设备 

开发 进程 应 对 公众 透明 


DIV 十 CSS 布局 规划 


号 将 





实 训 6 表格 与 表格 页 面 布局 





【 实 训 目标 】 

(1) 掌握 设计 表格 的 各 种 标记 及 其 属性 语法 。 

(2) 掌握 表格 行 标记 的 属性 及 设置 方法 。 

(3) 掌握 表格 单元 格 的 各 种 属性 及 设置 方法 。 

(4) 学 会 利用 表格 进行 Web 页 面 布局 设计 。 

【 实 训 内 容 】 

(1) 使 用 表格 标记 和 表格 属性 完成 简易 表格 的 设计 。 

(2) 利用 表格 背景 图 像 和 单元 格 合并 属性 设置 完成 日 程 表 页 面 的 设计 。 
(3) 使 用 表格 布局 模拟 真实 网 站 设计 简易 的 电子 政务 网 站 。 
(4) 使 用 CSS 样式 对 表格 和 单元 格 内 容 进行 样式 定义 并 引用 。 
【 实 训 项 目 】 

(1) 设计 网 络 主题 研讨 会 日 程 表 。 

(2) 设计 简化 版 “江苏 教育 电子 政务 网 ”。 


项 目 18 设计 网 络 主题 研讨 会 日 程 表 


1. 实 训 要 求 

(1) 使 用 表格 标记 和 标记 属性 设计 网 络 主题 研讨 会 日 程 表 , 如 图 1-6-1 所 示 。 
(2) 分 别 设置 表格 行 的 背景 颜色 和 背景 图 像 。 

(3) 设置 表格 的 单元 格 属性 。 

2. 实 训 内 容 

(1) 设置 表格 的 行 和 列 。 

(2) 设置 单元 格 合 并 (跨行 rowspan 和 跨 列 colspan 属性 ) 。 
(3) 设置 表格 的 行 tr 属性 。 

(4) 设置 表格 单元 格 td 属性 。 

(5) 设置 表格 的 背景 颜色 与 背景 图 像 。 

(6) 设置 图 层 的 样式 属性 。 

3. 实 训 所 需 知识 点 

(1) 表格 table 标记 。 
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会 议 时 间 会 议 名 称 演讲 人 





中 国 二 要 贡 排 放 清 单 研究 刘 文 彬 研究 员 ( 中 国 科学 院 
生态 研究 中 心 ) 





优化 的 PAHs 和 Dioxin 分 析 仪 在 环境 分 析 中 的 应 用 孔 用 (安捷伦 ) 





LCMS 在 持久 性 有 机 污染 物 分 析 中 的 研究 进展 朱 怀 恩 (SCIEX ) 
2015 年 10 月 14 日 
09:30 - 17:00 





| 质 首 技术 在 持久 性 有 机 污染 物 的 分 析 方法 陈 志 凑 ( 岛 津 ) 





持久 性 有 机 污染 物 POPs 的 前 处 理 技术 苏 现 评 ( 莱 伯 泰 科 ) 














张 庆 华 研究 员 ( 中 国 科学 院 
极地 持久 性 有 机 污染 物 研究 进展 » 
生态 研究 中 心 ) 











1-6-1 网 络 主题 研讨 会 日 程 表 


<table align = "center" border = "1" bordercolor = "#CACACA" width = "600px" 
height = "300px" frame = "border" rules = "all" cellspacing = "1px" cellpadding = "2px" > 
< caption>…</caption> 
<tr align = "center" valign = "middle"> 
<th>…</th> <th>…</th> 
</tr> 
过 起 > 
<td>…</td> <td>…</td> 
</tr> 
</table> 


(2) 图 层 div 标记 
<div id= "div0"></div> 
(3) 样式 style 标记 
< style type = "text/css"> 
x {font — size:13px;} 
#divO{background: # EAEAEA url("images61 — 4. png") no— repeat 0px Opx; 


width:720px; height :500px;} 
</style> 


中 旦 六 


下 杉 与 下 格 页 面 布 局 


Web 前 问 开 发 技术 实验 与 实践 一 一 HTML5、CSS3、JavaScript( 第 3 版 ) 





(4) 表格 行 tr\th 标记 


<tralign=" "valign=" "> 
<th> 会 议 时 间 </th> 
<th> 会 议 名 称 </th> 
</tr> 


(5) 单元 格 td 标记 
。 跨 列 属性 设置 : 


<td colspan = "3">…</td> 
。 跨行 属性 设置 : 
<td rowspan = "6">…</td> 


4. 实 训 过 程 与 指导 

编程 实现 网 络 主题 研讨 会 日 程 表 ,如 图 1-6-1 所 示 。 具 体 步 又 如 下 : 

(1) 文档 结构 的 创建 

g@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程序 名 称 为 prj_6_1. html。 格 式 如 下 : 


<! -- prj_6_1.html --> 


@ 保存 文件 。 输 入 文件 名 为 prj_6_1. html, 选 择 编码 类 型 为 UTF-8 ,然后 保存 文件 。 

(2) 页 面 内 容 设计 

@ 在 body 标记 中 插入 1 个 id 为 div0 的 div。 

@ 在 id 为 div0 的 div 中 分 别 插入 id 为 divl 的 div 和 1 个 表格 。 

@ 在 divl 中 插入 h3 标题 字 标记 ,内 容 为 “报告 内 容 ”。 

@ 在 div0 中 插入 8X3 表格 。 分 别 完 成 表 头 、 表 体内 容 的 设置 。 具 体 步 又 如 下 

a. 设置 表格 属性 : 居中 对 齐 .边框 1px、 宽 度 710px、 高 度 420px、 单 元 格 间距 0px、 边 框 
颜色 # CACACA。 

b. 设置 表格 第 1 行 。 设 置 行 高 为 40px, 设 置 3 个 单元 格 跨 列 合并 ,并 在 单元 格 插入 1 
个 图 层 ,设置 id 为 red。 其 内 容 为 “会 议 平台 不 支持 Windows XP 系统 ,请 大 家 使 用 
Windows 7 或 Windows 8 系统 ,IE 或 火狐 浏览 器 登录 ”。 然 后 插入 1 个 strong.a 标记 ,给 
strong 标记 定义 style 属性 ,其 值 为 "float:left;" ,内 容 为 “报告 主题 : “持久 性 有 机 污染 物 分 
析 技 术 "网 络 主题 研讨 会 ”。 定 义 超 链接 的 标题 为 “精彩 回放 ”。 

c. 设置 表格 第 2 行 。 第 2 行为 表格 的 表 头 。 定 义 行 高 为 35px,id 为 row2。 在 行 中 插 
入 3 个 th 标记 ,内 容 分 别 为 会 议 时 间 、 会 议 名 称 、 演 讲 人 。 

d. 设置 表格 第 3 行 。 定 义 行 高 为 35px,id 为 tdt2。 设 置 第 1 个 单元 格 跨 6 行 合并 ,内 容 
为 “2015 年 10 月 14 日 <br> 09:30 一 17:00”。 日 程 表 具 体内 容 如 表 1-6-1 所 示 。 


表 1-6-1 网 络 主题 研讨 会 日 程 表 























会 议 时 间 会 议 名 称 演 讲 人 
记 文 彬 ”研究 员 ( 中 国 科学 院 
二 恶 
中 国 二 亚 英 排放 清单 研究 a 
Re PARS 和 Dioxin 分 析 仪 在 环境 分 析 中 的 ig 家 按 从， 
ss LCMS 在 持久 性 有 机 污染 物 分 析 中 的 研究 进展 | 朱 怀 轧 CSCIEX) 
:30 17;00 | 质谱 技术 在 持久 性 有 机 污染 物 的 分 析 方法 陈 志 痰 ( 岛 津 ) 
持久 性 有 机 污染 物 POPs 的 前 处 理 技术 苏 丽 评 ( 沫 伯 系 和 ) 
_ 张 庆 华 ” 研 究 员 ( 中 国 科学 院 
极地 持久 性 有 机 污染 物 研究 进展 a 





e. 完成 代码 编写 后 ,保存 网 页 ,查看 网 页 效果 ,如 图 1-6-2 所 示 。 
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报告 内 容 





浏览 器 登录 


报告 主题 : “持久 性 有 机 污染 物 分 析 技 术 ” 网 络 主 题 研讨 会 精彩 回放 


会 议 平台 不 支持 Windows XP 系统 ， 请 大 家 使 用 Windows 7 或 Windows 8 系统 ，IE 或 火狐 





会 议 时间 


会 议 名 称 


演讲 人 





2015 年 10 月 





日 
09:30 一 17:00 


中 国 二 恶 英 排 放 清单 研究 


刘 文 彬 研究 员 ( 中 国 科 
学 院 生态 研究 中 心 ) 





优化 的 PAHs 和 Dioxin 分 析 仪 在 环境 分 析 中 的 应 用 


孔 陶 ( 安捷伦 ) 





14 |LCMS 在 持久 性 有 机 污染 物 分 析 中 的 研究 进展 


朱 怀 恩 ( SCIEX ) 





质谱 技术 在 持久 性 有 机 污染 物 的 分 析 方法 


陈 志 凌 ( 岛 津 ) 





持久 性 有 机 污染 物 POPs 的 前 处 理 技术 


苏 丽 评 ( 莱 伯 泰 科 ) 





极地 持久 性 有 机 污染 物 研究 进展 





张 庆 华 研究 员 ( 中 国 科 
学 院 生 态 研究 中 心 ) 








(3) 表现 设计 


1-6-2 日 程 表 初 始 页 面 





在 style 标记 中 分 别 定义 相关 标记 的 样式 ,其 代码 如 下 所 示 : 


< style type = "text/css"> 








x {font — size:13px;} 

#divO{background: # EAEAEA url("images61 — 4. png") no— repeat 0px Opx; 
width:720px; height:500px; margin: 0 auto;} 

#divl{width:710px; height :60px;} 


四 对 对 


表 柳 与 表 柳 页 面市 局 


Web 讲 问 开发 技术 实验 与 实践 一 一 有 TML5、CSS3、JavaScript( 第 3 版 ) 





h3{font - size:18px;color:white;padding:10px 20px; font - family: 微 软 雅 黑 ;} 

井 rowl{fbackground: # ElEl1El;} 

井 row2{background: # E3E3E3;} 

#tdi{background: # FOFOFO0;} 

# td2{background: # FBFBFB; } 

#red{color:red;} 

th{color: #666666;} 

a{background:url("images61 - 3. png") repeat — x;width:120px;height:24px; 

text - align:center; padding:8px auto; float:right;display: inline;} 

</style> 


(4) 保存 并 查看 网 页 
保存 网 页 后 ,查看 网 页 效果 如 图 1-6-1 所 示 。 


项 目 19 设计 简化 版 江苏 教育 电子 政务 网 站 


1. 实 训 要 求 
采用 表格 及 表格 布局 设计 一 个 简化 版 江苏 教育 电子 政务 网 站 。 利 用 表格 .表格 嵌 套 方 
法 ,根据 参考 素材 ,完成 网 站 设计 ,效果 如 图 1-6-3 所 示 。 





新 闻 资讯 2014 年 全 省 教育 电子 政务 工作 座谈 会 在 宁 召 开 国务 院 : 运用 大 数据 提高 政府 服务 水 平 


为 进一步 统一 思想 、 提 高 认识 、 振 奋 精神 、 明 ”” 近日， 国务 院 办 公 厅 印发 《关于 运用 大 数据 加 
同 确 方向 ，3 月 14 日 ， 全 省 教育 电子 政务 工作 座谈 会 强 对 市 场 主体 服务 和 监管 的 若干 意见 》 (以 下 简称 
政 公文 在 宁 召 开 ， 来 自 13 个 省 辖 市 、3 个 省 管 县 (市 、 。 《意见 》) 。 《意见 》 要 求 ， 以 社会 信用 体系 
区 ) 教育 门户 网 站 维护 保障 单位 负责 人 参加 了 会 ”建设 和 政府 信息 公开 、 数 据 开放 为 抓 手 ， 充 分 运用 

议 ， 各 地 就 教育 电子 政务 工作 开展 的 情况 作 了 交 ” 大 数据 、 云 计算 等 现代 信息 技术 ， 提 高 政府 服务 水 
领导 讲话 流 ， 对 全 省 教育 门户 网 站 绩效 考核 指标 体系 、 江 苏 平 ， 加 强 事 中 事后 监管 ， 维 护 市 场 正常 秩序 ， 促 进 
教育 网 《视频 新 闻 》 栏 目 筹建 和 通联 站 建设 管理 方 市 场 公平 竞争 ， 释 放 市 场 主体 活力 ， 进 一 步 优化 发 























进行 深入 的 研讨 。 展 环境 。 
成 果 展示 天 Wi 
江苏 省 电子 政务 中 心 。 版 权 所 有 
地 址 : 南京 市 北京 西 路 15 号 联系 电话 : 025-63335653 
| 苏 ICP 备 : 10205850 
图 1-6-3 “江苏 教育 电子 政务 ”网 站 简化 版 首页 
2. 实 训 内 容 


(1) 设置 表格 属性 及 表格 行 属性 。 
(2) 设置 表格 单元 格 跨 列 属性 。 


(3) 设置 表格 幅 套 。 
(4) 设置 超 链接 属性 。 
(5) 定义 内 部 样式 表 。 
3. 实 训 所 需 知识 点 
(1) 表格 table 标记 


< table border = "1" width= "1002px" align = "center" bgcolor = "#666699"></table> 


(2) 样式 style 标记 


< style type = "text/css"> 
td{ color:white; font - size:20px; } 
</style> 


(3) 图 片 img 标记 


< img src = "dzzw_banner 01. jpg"/> 


(4) 表格 行 tr、 单 元 格 td 标记 


<tr align = "center"> . </tr> 
<td colspan = "3" height = "80"> … </td> 


(5) 样式 引用 


<tr id= "nav" class="">.…</tr> <! -- 导航 条 样式 --> 


4. 实 训 过 程 与 指导 

编程 实现 江苏 教育 电子 政务 网 一 一 简化 版 ,效果 如 图 1-6-3 所 示 。 具 体 步骤 如 下 : 

(1) 文档 结构 的 创建 

@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 诸 句 , 注 明 程 序 名 称 为 prj_6_2. html, 格 式 如 下 : 


< 一 一 prj.6.2.htal 一 一 > 


@ 保存 文件 。 输 入 文件 名 为 prj_6_2. html, 选 择 编码 类 型 为 UTF-8 ,然后 保存 文件 。 
(2) 页 面 内 容 设 计 

@ 在 body 标记 中 插入 1 个 4X3 表格 。 

@ 设置 表格 标记 的 背景 颜色 为 #FFFFFF ,边框 为 0、 对 齐 方式 为 居中 、 宽 度 为 1002px。 
@ 将 表格 的 第 1 行 . 第 2 行 . 第 4 行 单元 格 跨 3 列 合并 为 1 个 单元 格 。 

@ 在 第 1 行 的 单元 格 中 插入 网 站 logo 图 像 ,文件 名 为 “dzzw_banner_01.jpg”。 区 
@ 在 第 2 行 的 单元 格 中 插入 1X6 表格 ,每 个 单元 格 内 插入 1 个 导航 菜单 ,然后 设置 相 | 六 


yl 
关 超 链 接 , 实 现 导航 菜单 。 导 航 菜单 的 内 容 如 表 1-6-2 所 示 。 





表 其 与 表 莅 页 面 布 局 
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表 1-6-2 江苏 电子 政务 网 导航 菜单 链接 表 




















序号 导航 名 称 对 应 链接 
1 新 闻 资 讯 http://dzzw. jsjyt. edu. cn/col/col7421/index. html 
2 领导 讲话 http://dzzw. jsjyt. edu. cn/col/col7662/index. html 
3 成 果 展 示 http://dzzw. jsjyt. edu. cn/col/col7426/index. html 
4 行政 公文 http://www. jsjyt. gov. cn 
5 江苏 教育 网 http://dzzw. jsjyt. edu. cn/col/col7431/index. html 
6 江苏 教育 信息 网 http://www. jse. gov. cn 








@ 在 第 3 行 第 1 单元 格 中 嵌 套 4X1 表格 ,设置 表格 边框 为 1px、 高 度 为 250px、 宽 度 为 
200px, 表 格外 边框 为 void、 内 边框 为 none。 实 现 垂直 导航 功能 ,导航 标题 分 别 为 “新 闻 资 
讯 “ 领 导 讲 话 ”“ 成 果 展 示 ” 行 政 公 文 "。 其 他 两 个 单元 格 中 分 别 插入 1 个 h4 和 1 个 p 标 
记 。 内 容 如 下 所 示 : 


2014 年 全 省 教育 电子 政务 工作 座谈 会 在 宁 召 开 

为 进一步 统一 思想 .提高 认识 、 振 奋 精 神 、 明 确 方 向 ,3 月 14 日 ,全 省 教育 电子 政务 工作 座谈 会 在 宁 召 
开 , 来 自 13 个 省 辖 市 .3 个 省 管 县 (市 区) 教育 门户 网 站 维护 保障 单位 负责 人 参加 了 会 议 , 各 地 就 教育 电子 
政务 工作 开展 的 情况 作 了 交流 ,对 全 省 教育 门户 网 站 绩效 考核 指标 体系 .江苏 教育 网 < 视频 新 闻 > 栏 目 筹建 
和 通联 站 建设 管理 方案 进行 深入 的 研讨 。 

国务 院 : 运用 大 数据 提高 政府 服务 水 平 

近日 ,国务 院 办 公 厅 印发 (关于 运用 大 数据 加 强 对 市 场 主体 服务 和 监管 的 若干 意见 (以 下 简称 ( 意 
见 》) 。 

《意见 ) 要 求 ,以 社会 信用 体系 建设 和 政府 信息 公开 ,数据 开放 为 抓 手 ,充分 运用 大 数据 \ 云 计算 等 现代 
信息 技术 ,提高 政府 服务 水 平 ,加 强 事 中 事后 监管 , 维护 市 场 正常 秩序 ,促进 市 场 公平 竞争 , 释放 市 场 主体 
活力 ,进一步 优化 发 展 环境 。 


@ 在 第 4 行 的 td 标记 中 设置 高 度 为 35px、 对 齐 方式 为 居中 。 分 别 插入 一 条 水 平分 隔 
线 ( 颜 色 为 #C0C0C0) 和 3 句 话 。 内 容 如 下 所 示 : 


江苏 省 电子 政务 中 心 snbsp;&nbsp; 版 权 所 有 
地 址 : 南京 市 北京 西 路 15 号 联系 电话 : 025 - 63335653 
苏 ICP 备 : 10205850 


完成 代码 设计 后 ,保存 网 页 。 在 浏览 器 中 查看 网 页 ,如 图 1-6-4 所 示 。 

(3) 表现 设计 

在 style 标记 中 分 别 定义 单元 格 td. 行 tr 段落 p .导航 条 nav、 超 链接 a 的 样式 。 

@ 定义 全 局 样式 。* 样式 为 字 大 小 18px、 字 体 宋 体 , 边 界 上 下 0 左右 自动 .填充 均 
为 0。 

@ 定义 h4 标记 样式 。h4 样式 为 颜色 红色 ,填充 上 下 15px、 左 右 自动 .高度 30px。 

@ 定义 td 标记 样式 。td 样式 为 颜色 黑色 .字体 大 小 20px。 

@ 定义 tr 标记 样式 。tr 样式 为 文本 内 容 水 平 居 中 。 

@ 定义 p 标 记 样 式 。p 样式 为 首 行 缩 进 2 个 字符 、 字 体 大 小 18px、 段 落 向 左 对 齐 。 

@ 定义 导航 样式 。#nav 样式 为 文本 对 齐 方式 水 平 居中 、 宽 度 120px、 高 度 40px, 边 界 
上 下 0、 左右 自动 ,填充 上 下 5px、 左 右 20px。 





2014 年 全 省 教育 电子 政务 工作 座谈 会 在 宁 召 开 国务 院 : 运用 大 数据 提高 政府 服务 水 平 


为 进一步 统一 思想 、 提 高 认识 、 振 亩 精神 、 明 确 方 向 ,3 近日， 国务 院 办 公 厅 印发 《关于 运用 大 数据 加 强 对 市 场 
月 14 日 ,全 省 教 育 电子 政务 工作 座谈 会 在 宁 召 开 ,来 自 “主体 服务 和 监管 的 若干 意见 》( 以 下 简称 《意见 》)。 
13 个 省 辖 市 、3 个 省 管 县 ( 市 、 区 ) 教育 门户 网 站 维护 保 《意见 》 要 求 ， 以 社会 信用 体系 建 

随 单位 负责 人 参加 了 会 议 ， 各 地 就 教育 电子 政务 工作 开展 开 、 数 据 开放 为 抓 手 ， 充 分 运用 大 数据 


系 、 江苏 教 育 网 《视频 新 闻 》 栏 目 筹建 和 通联 站 建设 管理 四 促进 市 场 公平 训 争 ， 释放 市 场 主体 活 
Ee i 力 ,进一步 优化 发 展 环境 。 





江苏 省 电子 政务 中 心 版 权 所 有 
地 址 : 南京 市 北京 西 路 15 号 联系 电话 : 025-63335653 


1-6-4 网 页 效果 


@ 定义 超 链 接 伪 类 样式 。a:link 、a: visited、a:active 样式 为 字符 装饰 无 .颜色 白色 、 背 
景 颜色 #666699。a:hover 样式 为 颜色 白色 .背景 颜色 并 9999ff、 字 体 标 粗 。 

样式 应 用 。 给 第 2 行 表格 中 导航 td 标记 应 用 样式 nav, 产 生 导 航 菜单 。 

(4) 保存 并 查看 网 页 

完成 代码 设计 后 ,再 次 保存 网 页 文件 。 通 过 浏览 器 查看 页 面 效 果 , 如 图 1-6-4 所 示 。 

(5) 拓展 与 提高 

如 果 采 用 DIV 十 CSS 技术 实现 同样 的 页 面 设计 效果 应 如 何 编写 代码 ? 


课外 拓展 训练 6 


1. 设计 新 书 推荐 页 面 ,效果 如 图 1-6-5 所 示 。 要 求 如 下 : 

(1) 页 面 标题 “新 书 推荐 ”。 

(2) table 标记 属性 定义 : 边框 为 1px\ 边 框 颜色 井 FOFOF0 ,单元 格 间距 0px。 

(3) 图 像 img 标记 样式 : 宽度 150px、 高 度 200px。 

(4) 书 名 统一 采用 4 号 标题 ,其 他 文字 样式 为 默认 ; 书 图 像 文 件 分 别 为 image61. jpg 一 
image64. jpg。 

(5) 程序 名 称 为 project_6_1. html。 

附 : 书简 介 内 容 如 下 : 














数学 的 世界 1 作者 : J.R. 纽曼 编 , 王 善 平 , 李 璐 译 定价 : 59. 00 元 推荐 理由 : 呈现 在 大 家 面前 的 
是 由 J.R. 纽曼 花费 十 五 年 心血 , 精 选 的 迄今 为 止 世界 上 最 天 才 的 数学 文献 集锦 。 高 … 





表 砂 与 表 柳 页 面市 局 


中叶 将 
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现代 教育 技术 作者: 傅 钢 善 定价 : 39.80 元 推荐 理由 : 本 教材 结构 新 颖 ,逻辑 清晰 ,图 文 并 茂 , 内 容 


丰富 , 易 教 易学 ,知行 合 一 。 





《生态 智慧 一 一 生态 可 持续 性 》 作者 : 伍 业 钢 定价 : 29. 00 推荐 理由 : 传统 的 经 济 学 认为 , 经济 的 投 


入 和 产 出 可 以 简化 为 "资本 + 劳动 "的 投入 等 于 经 济 增长 ,而 忽略 了 对 劳动 者 的 人 文 关 怀 (以 人 为 本 )。 
中 国 工程 院 院士 (11) 作者 : 中国 工程 院 、 高 等 教育 出 版 社 、 中 国 工程 物理 研究 院 定价 : 500. 00 推荐 
理由 : 中 国 工程 院 院士 是 国家 在 工程 技术 方面 设立 的 最 高 学 术 称 号 ,为 终身 荣誉 。 为 了 展现 中 国 工程 院 


院士 的 风采 ,宣传 科学 家 积极 投身 。 











C | © 1270018020/ 诗 


总 篇 推荐 


数学 的 世界 akanmak “现代 教育 技术 

作者 : JR. 纽曼 编 ， 王 着 平 , 李 瑞 译 定价 :59.00 站 Wg 元 推荐 理由 : 7 结 
”元 推荐 理由 : 呈现 在 大 家 面前 的 是 由 J.R. 纽 晤 花费 Hor ger a 

十 五 年 心血 ， 精 选 的 迄今 为 止 世界 上 最 天 才 的 数 。 。 易学 ,知行 全 ， “ 

学 文献 集锦 。 高 有 eg 


《生态 智慧 一 一 生态 可 持续 性 》 中 国 工程 院 院士 (11 ) 


作者 : 伍 业 钢 定价 : 29.00 推荐 理由 : 传统 的 经 济 学 
认为 ， 经 济 的 投入 和 产 出 可 以 简化 为 “资本 + 劳 
动 ”的 投入 等 于 经 济 增长 ， 而 忽略 了 对 劳动 者 的 人 


为 竹 身 莹 誉 。 
文 关怀 ( 以 人 为 本 宣传 科学 家 积极 投身 








图 1-6-5 新 书 推荐 页 面 








2. 采用 表格 布局 设计 区 域 划 分 页 面 ,效果 如 图 1-6-6 所 示 ,要求 如 下 : 


了 i Elm 


作者 : 中 国 工程 院 、 高 等 教育 出 版 社 、 中 国 工程 物 

理 研究 院 定价 : 500.00 推荐 理由 : 中 国 工程 院 院 

士 是 国家 在 工程 技术 方面 设立 的 最 高 学 术 称号 
誉 。 为 了 展现 中 国 工程 院 院 士 的 风 平 














AT Ee Br 国 蕊 二 区 本 
口 区 域 划分 和 
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1 服务 区 


2 行政 区 
3 生活 区 


5 娱乐 区 

















图 1-6-6 ”区域 划分 


(1) table 标记 属性 定义 : 边框 为 5px、 宽 度 为 350px、 高 度 为 350px、 居 中 对 齐 。 

(2) 单元 格 td 样式 : 水 平 、 垂 直 均 居中 对 齐 , 字 大 小 为 24px。 

5 个 区 域 单元 格 id 样式 : 颜色 均 为 白色 ; 背景 分 别 为 井 333300、# 553300、# 773300、 
并 993300、# AA3300。 

(3) 程序 名 称 为 project_6_2. html。 


表 柳 与 表 杉 页 面市 局 


四 对 灶 





实 训 7 表单 页 面 设 计 





【 实 训 目标 】 
(1) 理解 表单 的 概念 ,熟练 掌握 表单 创建 方法 。 
(2) 掌握 表单 相关 属性 的 设置 。 


(3) 掌握 表单 输入 、 多 行文 本 输入 列表 框 等 表单 控件 的 属性 及 设置 方法 。 


(4) 学 会 使 用 fieldset 和 legend 标记 来 分 组 表单 控件 。 

(5) 学 会 设计 用 户 登录 、 用 户 注册 、 网 上 调查 问卷 等 表单 页 面 。 
【 实 训 内 容 】 

(1) 使 用 表单 和 表单 控件 进行 简易 页 面 布 局 设计 。 

(2) 综合 运用 图 层 、 表 格 和 表单 进行 页 面 混合 布局 。 

(3) 使 用 样式 表 定 义 图 层 、 表 单 控件 .表格 .单元 格 的 样式 。 
(4) 模仿 真实 案例 进行 表单 综合 编程 练习 。 

【 实 训 项 目 】 

(1) 设计 科技 工作 者 建言 页 面 。 

(2) 设计 《大 学 生财 期 社会 实践 调查 问卷 )。 


项 目 20 设计 科技 工作 者 建言 页 面 


1. 实 训 要 求 


采用 DIV ,表格 混合 布局 设计 “留言 板 ” 页 面 , 效 果 如 图 1-7-1 所 示 。 


2. 实 训 内 容 

(1) 图 层 与 表格 混合 布局 。 

(2) 表单 和 表单 控件 的 综合 运用 。 
(3) 样式 表 的 应 用 。 

3. 实 训 所 需 知识 点 

(1) 表单 form 标记 


< form name = "forml" method = "post" action = "">…</form> 


(2) 表格 table 标记 


<table align = "center" border = "1" width = "650px" height = "300px" > … 


</table> 




















科技 工作 者 建言 合 不 保密 司 保密 ”留言 类 型 : | "| 











4 





注 ; 如 果 候 的 留言 不 便 公开 ， 请 选择 "保密 " 迁 项 ,提交 后 可 赞 系 统 反馈 给 优 的 雷 言 狭 号 、 查询 密码 和 息 的 姓名 查询 回复 


旷 | [到 | 


。 请 遵守 国家 有 关 法 律 、 法 规 , 尊 午 网 上 道德 ,承担 一 切 因 宏 的 行为 而 直接 或 同 接 引起 的 法 律 奏 任 , 
，。 本 网 站 拥有 管理 笔名 和 留言 的 一 切 权利 








1-7-1 留言 板 页 面 
(3) 样式 style 标记 
< style type = "text/css"> 
#divi{background: #f2f9fd;color: #66ffff;width:100 % ;height:30px;} 


.tdl{line ~ height:22px;font - size:18px;font - weight:bold;} 
</style> 


(4) 表单 控件 
。 文 本 输入 框 : 


< input type = "text" name = "name" size="10"> 
。 单 选 钮 : 

< input type = "radio" name = "bm"> 不 保密 
。 提交 按 钮 : 


< input type = "submit" value = "提交 "> 





。 重 置 按钮 : 
实 
< input type = "reset" value = "清空 "> 隐 


表 音 页 面谈 计 
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。 列表 框 select 标记 : 


< select name = "lx"> 
< option value = 0 selected></option> 
<option value = 1 > 投诉 </option> 
</select> 


。 多 行文 本 框 textarea 标记 : 


< textarea name = "" rows = "6" cols = "50"> 在 此 留言 </textarea> 


4. 实 训 过 程 与 指导 

编程 实现 “设计 科技 工作 者 建言 页 面 , 具 体 步 又 如 下 : 

(1) 文档 结构 的 创建 

@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程 序 名 称 为 prj_7_1. html, 格 式 如 下 : 


= p= 


@ 保存 文件 。 输 入 文件 名 为 prj_7_1. html, 选 择 编码 类 型 为 UTF-8, 然 后 保存 文件 。 

(2) 页 面 内 容 设计 

在 body 标记 中 插入 3 个 div、3 个 表格 和 1 个 表单 及 若干 表单 控件 。 

@ 在 body 中 插入 1 个 父 div,id 为 div0, 作 为 外 图 层 。 

@ 在 div0 中 分 别 插入 2 个 子 div,id 分 别 为 divl .div2 。 

@ 在 divl 中 插入 1 个 1X2 表 格 ,单元 格 内 容 为 “留言 板 . 科 技工 作者 建言 ”, 定 义 class 
属性 分 别 为 btl .bt2。 

@ 在 div2 中 先 插入 表单 ,然后 在 表单 中 分 别 插入 2 个 表格 ,其 中 上 表 为 1X1 表格 ,内 
容 为 “发 表 留 言 ", 字 体 颜色 为 红色 。 下 表 为 7X2 表格 ,前 4 行 ,第 1 列 单元 格 内 容 分 别 为 
“姓名 ”电子 邮件 “分 类 ”留言 ", 定 义 class 属性 均 为 ttl。 第 2 列 单元 格 分 别 插入 2 个 单 
行文 本 输入 框 .2 个 单 选 按钮 .1 个 列表 框 .1 个 多 行文 本 框 。 其 中 列表 框 中 含有 5 个 列表 
项 ,分 别 为 空白 .投诉 ,咨询 .建议 反馈, 默认 为 空白 。 在 表格 中 第 5、6、7 行 中 ,每 行路 2 列 
合并 ,第 6 行 插入 提交 按钮 . 重 置 按钮 ,并 且 在 单元 格 中 居中 显示 。 其 他 两 行 的 内 容 如 下 
所 示 : 

注 : 如 果 您 的 留言 不 便 公开 ,请 选择 “保密 ”选项 , 提交 后 可 赁 系统 反馈 给 您 的 留言 编号 .查询 密码 和 
您 的 姓名 查询 回复 。 


。 请 遵守 国家 有 关 法 律 法规 ,尊重 网 上 道德 ,承担 一 切 因 您 的 行为 而 直接 或 间接 引起 的 法 律 责任 。 
。 本 网 站 拥有 管理 笔名 和 留言 的 一 切 权利 。 


@ 完成 代码 设计 后 ,通过 查看 网 页 观看 页 面 效果 ,如 图 1-7-2 所 示 。 

(3) 表现 设计 

在 style 标记 中 分 别 定义 全 局 样式 各 图 层 及 相关 标题 样式 ,样式 定义 如 下 所 示 。 
@ 定义 全 局 样式 。 全 局 样式 字体 大 小 为 12px。 


个 导言 板 设 计 
六 CG | © 127.0.0.1:8020/ 清 华 计 -规划 教材 -实验 教材 第 3 版 资源 及 代码 20170526/ 实 i7/ 实 7- 代 码 /pr 7 1html?_h.， 会 | : 











留言 板 科技 工作 者 建言 





AE= = 








目 不 保密 日 保密 留言 类 型 : 习 














: 如 果 您 的 留言 不 便 公开 ， 请 选择 "保密 "选项 ,提交 后 可 赁 系统 反馈 给 您 的 留言 编号 、 查 
查询 回复 - 





E33 

。 请 末 守 国家 有 关 法 律 、 法 规 ， 尊重 网 上 道德 ,承担 一 切 因 您 的 行为 而 直接 或 司 接 引 起 
的 法 律 责任 . 

。 本 网 站 拥有 管理 笔名 和 留言 的 一 切 权利 。 





1-7-2 未 应 用 样式 时 留言 板 页 面 


@ 定义 父 图 层 div 样式 。# div0 样式 为 宽度 800px, 高 度 380px, 边 框 粗细 5px, 线 型 实 
线 , 颜 色 #F3F3F2, 边 界 上 下 30px、 左 右 自 动 、 填 充 10px。 

@ 定义 子 图 层 div 样式 。#divl 样式 为 背景 颜色 并 F2F9FD. 前 景 颜色 #0000FF 、 宽 度 
100% 高度 30px。 

@ 定义 子 图 层 div 样式 。#div2 样式 为 背景 颜色 并 F2F9FD. 前 景 颜色 #0000FF 、 宽 度 
100% \ 高度 340px、 顶 部 边界 3px。 

@ 定义 #div2 子 图 层 中 第 1 列 中 * 姓 名 .电子 邮件 、 分 类 ”。. tdl 样式 为 字体 大 小 12px、 
字体 粗细 标 粗 行距 22px\ 前 景 颜色 #339966 宽度 100px、 文 本 居中 对 齐 。 

@ 定义 #divl 子 图 层 中 “留言 板 ” 样 式 .. btl 样式 为 字体 大 小 26px、 字 体 粗细 标 粗 、 字 
体 黑 体 . 前 景 颜色 #0033CC、 宽 度 500px、 文 本 左 对 齐 。 

@ 定义 # divl 子 图 层 中 “科技 工作 者 建言 "样式 。. bt2 样式 为 字体 大 小 12px、 字 体 粗细 
标 粗 、 字 体 黑 体 . 前 景 颜色 #0033CC、 宽 度 200px、 文 本 左 对 齐 。 

(4) 保存 并 查看 网 页 

完成 代码 设计 后 ,再 次 保存 网 页 文件 。 通 过 浏览 器 查看 页 面 ,效果 如 图 1-7-2 所 示 。 


项 目 21 设计 大 学 生 哮 期 社会 实践 调查 问卷 页 面 


1. 实 训 要 求 

采用 表格 布局 设计 大 学 生 暑期 社会 实践 调查 问卷 页 面 , 如 图 1-7-3 所 示 。 
2. 实 训 内 容 

(1) 表单 与 表格 嵌 套 应 用 。 

(2) 表单 控件 属性 设置 。 


表 章 页 面 座 计 


将 


里 
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图 1-7-3 大 学 生 暑期 社会 实践 调查 问卷 页 面 


(3) 使 用 表格 和 表格 嵌 套 进行 页 面 精确 布局 。 
(4) 内 部 样式 表 的 定义 与 应 用 。 

3. 实 训 所 需 知识 点 

(1) 表单 form 标记 





(2) 表格 table 标记 


<table background = "" width= "100%" border = "8"></table> 


(3) 样式 style 标记 
< style type = "text/css"> 
#divl{margin:0px;background: # 00cccc; height:100% ;} 


.tdl{font - weight:bold;font — size:18px;color: #3300cc;} 
</style> 


(4) 表单 控件 

。 单行 文本 输入 框 : 
< input type = "text" name = "name" size= "10"> 

。 单 选 按 钮 : 
< input type = "radio" name = "class"> 大 一 <br> 

。 复 选 框 ， 
< input type = "checkbox" name = "zy1"> 自 己 感 兴趣 <br> 

。 提交 按 钮 : 
< input type = "submit" value = "提交 "> 

。 重 置 按 钮 : 

< input type = "reset" value = "清空 "> 

。 多 行文 本 框 textarea 标记 : 

< textarea name = "" rows = "5" cols = "100"> 请 您 提出 宝贵 的 建议 : </textarea > 
(5) 表单 与 表格 嵌 套 

< form method = "post" action = ""> <! 一 表单 包含 表格 --> 

<table> <! 一 在 表格 中 可 以 插入 若干 表单 控件 -一 > 
<tr> 
<td>< input type = "radio" name = "sex"> 男 </td> 
<td>< input type = "radio" name = "sex"> 女 </td> 
</tr> 


</table> 
</form> 


~ 号 将 


正音 页 面谈 计 
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4. 实 训 过 程 与 指导 

编程 实现 “大 学 生 哮 期 社会 实践 调查 问卷 ”页面 , 具 体 步 骤 如 下 : 

(1) 文档 结构 的 创建 

@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程序 名 称 为 prj_7_2. html。 格 式 如 下 : 


a pr bal 一 一 人 


@ 保存 文件 。 输 入 文件 名 为 prj_7_2. html, 选 择 编码 类 型 为 UTF-8, 然 后 保存 文件 。 

(2) 页 面 内 容 设计 

在 body 标记 中 插入 1 个 表单 、1 个 外 表格 .内 嵌 若 干 个 子 表 格 ,再 插入 相关 表单 控件 。 

@ 在 body 中 插入 1 个 表单 form 标记 。 

@ 在 form 标记 中 插入 1 个 12 行 1 列 的 表格 。 设 置 表格 的 背景 图 像 为 bgimages. jpg、 
宽度 为 850px、 边 框 为 14px、 单 元 格 间 距 为 0、 单元 格 边 距 为 0、 对 齐 方式 为 居中 边框 颜 色 为 
白色 。 

@ 在 表格 第 1 行 . 第 2 行 中 分 别 插入 标题 和 说 明 。 定 义 标题 类 样式 . btl 、 两 个 段落 样 
式 #pl。 内 容 如 下 所 示 : 


大 学 生 暑 期 社会 实践 调查 问卷 
亲爱 的 同学 : 大 家 好 ! 
为 了 更 好 地 了 解 大 学 生 对 近年 来 计算 机 类 专业 填报 火热 现象 的 看 法 ,特制 定 本 问卷 ,希望 得 到 
您 的 配合 ,请 认真 阅读 并 回答 以 下 问题 ,您 的 回答 将 直接 影响 本 调查 的 可 信 度 和 有 效 性 ,真诚 感谢 您 
的 支持 , 祝 您 天 天 愉快 ,谢谢 ! 


@ 在 表格 第 3 行 插入 1 个 1 行 2 列 的 表格 ,在 第 1 个 单元 格 中 插入 “1. 您 的 性 别 : ”, 在 
第 2 个 单元 格 中 插入 2 个 单 选 按 钮 ,表示 “ 男 ”“ 女 ”。 

@ 在 表格 第 4 行 中 插入 1 个 1 行 2 列 的 表格 ,在 第 1 个 单元 格 中 插入 “2. 您 的 学 校 :”， 
在 第 2 个 单元 格 中 插入 1 个 单行 文本 输入 框 ,并 定义 文本 框 的 大 小 为 40。 

@ 在 表格 第 5 行 中 插入 1 个 1 行 2 列 的 表格 ,在 第 1 个 单元 格 中 插入 “3. 您 的 年 级 :”， 
在 第 2 个 单元 格 中 插入 1 个 下 拉 列 表 框 ,列表 框 中 6 个 选项 ,分 别 为 “请 选择 您 的 年 级 : 大 
二 x 夹 三 天 三 > 天 四 、 夫 专 ”; 

@ 在 表格 第 6 行 中 插入 1 个 2 行 1 列 的 表格 ,在 第 1 个 单元 格 中 插入 “4. 报考 该 专业 的 
原因 :”, 在 第 2 个 单元 格 中 插入 7 个 复 选 框 , 复 选 框 的 内 容 分 别 为 “自己 感 兴趣 ”对 将 来 发 
展 有 利 ”“ 适 应 社会 “父母 主张 “老师 建议 “学 校 调 剂 * 其 他 ”。 

@ 在 表格 第 7 行 中 插入 1 个 2 行 1 列 的 表格 ,在 第 1 个 单元 格 中 插入 “5. 您 对 该 专业 的 
建议 :”, 在 第 2 个 单元 格 中 插入 5 个 复 选 框 , 复 选 框 的 内 容 分 别 为 “招收 时 重 质 不 重量 ”“ 师 
资 力量 要 改进 “要 更 适应 社会 需要 ”“ 加 强 专业 实验 室 建设 “其 他 ”。 

@ 在 表格 第 8 行 中 插入 1 个 2 行 1 列 的 表格 ,在 第 1 个 单元 格 中 插入 “6. 您 认为 该 专业 
学 生 有 必要 参加 社会 实践 :”, 在 第 2 个 单元 格 中 插入 3 个 单 选 按钮 , 单 选 按钮 的 内 容 分 别 为 
“有 必要 ”没有 必要 “无所谓”。 

@@ 在 表格 第 9 行 中 插入 1 个 2 行 1 列 的 表格 ,在 第 1 个 单元 格 中 插入 “7. 您 的 父母 是 否 


赞成 您 读 该 专业 :”, 在 第 2 个 单元 格 中 插入 3 个 单 选 按钮 , 单 选 按钮 的 内 容 分 别 为 “很 赞成 ， 
希望 如 此 ”一 般 , 不 是 很 高 兴 ”“ 不 了 解 ”。 

加 在 表格 第 10 行 中 插入 1 个 2 行 1 列 的 表格 ,在 第 1 个 单元 格 中 插入 “8. 您 对 学 校 的 
建议 :”, 在 第 2 个 单元 格 中 插入 1 个 5 行 100 列 的 多 行文 本 框 , 多 行文 本 框 初始 内 容 为 “请 
您 提出 宝贵 的 建议 ”。 

加 在 表格 第 11 行 ( 行 高 度 50px) 中 插入 提交 按钮 和 重 置 按钮 。 按 钮 的 value 值 分 别 为 
“提交 答案 “清空 "。 按 钮 之 间 留 8 个 空格 。 

@@ 在 表格 第 12 行 的 单元 格 中 插入 font 标记 ,设置 颜色 为 蓝 色 。Font 标记 的 内 容 为 
“版 权 所 有 : 计算 机 科学 与 技术 系 软件 工程 教研 室 copy right&copy;2015-2020”。 定 义 单 
元 格 的 高 度 40px, 水 平 .垂直 均 居 中 对 齐 。 

完成 上 述 步 又 后 ,整个 调查 表 设 计 基 本 完成 ,下 面 进行 样式 定义 和 应 用 。 

(3) 表现 设计 

在 style 标记 中 分 别 定义 全 局 样式 各 图 层 及 相关 标题 样式 ,样式 定义 如 下 所 示 。 

@ 定义 body 样式 。body 样式 为 背景 颜色 #BBDCFF ,边界 20px。 

@ 定义 调查 问卷 标题 样式 。. btl 样式 为 字体 大 小 35px、 行 高 100px, 字 体 黑体 .颜色 
#0033FF 文本 居中 对 齐 。 

@ 定义 调查 项 目标 题 内 容 样式 。. tdl 样式 为 字体 标 粗 .大 小 18px\ 颜 色 #3300CC。 

@ 定义 调查 说 明 内 容 样式 。# pl 样式 为 首 行 缩 进 2 个 字符 ,字体 大 小 16px、 标 粗 、 颜 
色 #3366FF。 

(4) 保存 并 查看 网 页 

完成 代码 设计 后 , 青 次 保存 网 页 文件 。 通 过 浏览 器 查看 页 面 ,效果 如 图 1-7-3 所 示 。 


课外 拓展 训练 7 


1. 设计 参 会 注册 表 页 面 ,效果 如 图 1-7-4 所 示 。 具 体 要 求 如 下 : 

(1) 标题 为 “ 参 会 注册 表 ”。 

(2) 页 面包 含 : 页 面 内 容 在 form 标记 内 ,使 用 表单 中 嵌 套 表格 ,进行 页 面 布局 设计 , 表 
格 标题 为 “ 参 会 注册 表 ”。 

(3) 程序 名 称 为 project_7_1. html。 











中 多 全 注册 雪 x 
C | @ 127.0.0.1:8020/ 清 华 社 -规划 教材 - 交 验 吉 材 第 3 版 资源 及 代码 2.…. 
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图 1-7-4 参 会 注册 表 页 面 


表 音 页面 设 计 


~~ 呈 六 
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2. 设计 图 书馆 读者 调查 问卷 页 面 ,效果 如 图 1-7-5 所 示 , 具 体 要 求 如 下 : 
(1) 标题 为 “图 书馆 读者 调查 问卷 ”。 


(2) 页 面包 含 : 表格 含有 年 级 专业、 对 于 图 书馆 的 阅览 环境 .您 到 图 书馆 的 原因 是 、 您 


到 图 书馆 的 频率 、 您 对 学 校 的 建议 等 。 
(3) 程序 名 称 为 project_7_2. html。 


图 书馆 读者 调查 问卷 


为 了 能 够 及 时 了 解 您 对 图 书馆 的 需求 ， 提 升 我 校 图 书馆 文献 资源 建设 的 质量 和 水 平 ， 更 好 地 
为 我 校 教学 科研 服务 ， 我 馆 特 设计 了 问卷 调查 题目 如 下 ， 请 协助 填写 ， 谢 谢 您 的 合作 ! 


1. 您 的 年 级 
请 您 选择 ， | 请 您 选择 
2. 您 的 专业 

















3. 对 于 图 书馆 的 阅览 环境 
满意 





日 不 满意 您 的 建议 ， 


4. 您 到 图 书馆 的 原因 是 《可 多 选 ) 
回 借阅 专业 图 书 

回 随便 坐 坐 ， 翻 翻 书刊 
回 借阅 光盘 

回 参 加 图 书馆 组 织 的 活动 
回 自习 , 复习 功课 
回 上 网 

回 检索 电子 文献 

5. 您 到 图 书馆 的 频率 

日 几乎 每 天 

四 每 周一 两 次 

自 每 月 一 两 次 

加 几乎 不 去 

6. 您 对 学 校 的 建议 

请 您 提出 宝贵 建议 : 























图 1-7-5 图 书馆 读者 调查 问卷 


第 三 部 分 
HTML5 基 础 与 CSS3 应 用 





实 训 8 HTMLS 基础 与 CSS3 应 用 





【 实 训 目标 】 

(1) 理解 HTML5 文档 结构 元 素 ,学 会 利用 HTML5 结构 元 素 进 行 页 面 布 局 。 
(2) 学 会 运用 HTML5 新 增 表单 元 素 和 新 增 表单 类 型 设计 相关 表单 页 面 。 
(3) 掌握 CSS3 新 增 特 性 ,学 会 使 用 过 渡 、 转 换 、3D 转换 及 动画 设计 页 面 效果 。 
【 实 训 内 容 】 

(1) 使 用 HTML5 结构 元 素 进行 页 面 布 局 设计 。 

(2) 使 用 CSS3 新 特性 设计 导航 菜单 。 

(3) 使 用 HTML5 新 增 结构 元 素 设计 HTML5 页 面 。 

(4) 使 用 CSS 新 特性 对 页 面 元 素 进行 样式 定义 。 

(5) 使 用 HTML5 设计 简易 网 站 。 

【 实 训 项 目 】 

(1) 当当 网 企业 用 户 注册 页 面 设计 。 

(2) HTML5 结构 元 素 设计 页 面 布局 。 

(3) H3C- 新 华 三 集团 行业 案例 CSS3 特效 页 面 设 计 。 

(4) 纯 CSS3 偏光 图 像 画廊 。 


项 目 22 当当 网 企业 用 户 注册 页 面 设计 


1. 实 训 要 求 

利用 HTML5 新 增 表 单 类 型 和 表单 属性 模仿 设计 “当当 网 企业 用 户 注 册页 面 ”", 当当 网 
企业 用 户 注册 页 面 网 址 为 https://login. dangdang. com/register_company. php, 效 果 如 
图 1-8-1 所 示 。 功 能 要 求 如 下 : 

(1) 根据 当当 网 企业 用 户 注册 页 面 进行 适当 简化 。 具 体 要 求 如 下 : 

@ 将 头 部 的 导航 、 底 部 的 导航 与 版 权 信 息 删 除 。 

@ 删除 “新 用 户 注 册 ” 页 面 ,只 做 “企业 用 户 注 册 ” 页 面 。 

@ 对 企业 用 户 注册 页 面 中 部 的 图 像 效 果 进行 合并 ,直接 从 原 网 站 上 做 个 截图 。 

@ 使 用 表格 .表单 及 表单 元 素 设计 页 面 , 公 司 地 址 中 省 市、 区 不 需要 做 关联 。 

(2) 采用 HTML5 新 增 表单 类 型 和 表单 属性 分 别 设计 账户 信息 和 企业 及 联系 人 信息 。 

(3) 由 于 JavaScript 脚本 方面 的 知识 还 未 学 习 , 对 表单 元 素 进 行 验证 不 做 要 求 , 只 对 
“账户 信息 ”和 “企业 及 联系 人 信息 ”中 的 验证 码 部 分 的 表单 元 素 进行 验证 ,并 给 出 代码 。 

经 过 改版 后 ,设计 的 “当当 网 企业 用 户 注册 页 面 ”效果 如 图 1-8-2 所 示 。 
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图 1-8-1 当当 网 企业 用 户 注册 页 面 
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1-8-2 改版 后 当当 网 企业 用 户 注 册页 面 


2. 实 训 内 容 

(1) HTML5 新 增 表单 类 型 (email、url 等 ) 的 应 用 。 
(2) HTML5 新 增 表单 属性 的 应 用 。 

(3) 表格 的 创建 与 属性 设置 。 

(4) HTML5 新 增 结构 元 素 的 应 用 。 

(5) 表单 元 素 的 验证 。 

(6) 自 定义 验证 码 生 成 函数 与 调用 。 
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3. 实 训 所 需 知识 点 
(1) 图 层 div 标记 


<div id="" class = "info area" style="z— index: 1 "></div> 


(2) 样式 style 标记 


<style type = "text/css"> 
x {padding: Opx; margin: Opx; /x* 定义 全 局 样式 * /} 
</style> 


(3) 脚本 script 标记 


< script type = "text/javascript" src= "prj 8_1 verifycode.js"></script> 
(4) 表单 form 标记 


< form id = "registerForm"> 
<div class= "body"> 
<table cellpadding = "0" cellspacing = "0" border = "0" width= "100% "></table> 
</div> 
</form> 


(5) 表格 table 标记 


<table> 
< 
<td> 
< input id = "username" name = "username" type = "text" class = "text" MaxLength= "20" 
tabindex = "1" onfocus = "displayInfo();" onblur = "checkName();" /> 
</td> 


</tr> 
</table> 


(6) 新 增 表单 类 型 及 表单 属性 


< input id= "email " name = "txt_username " type = "email" class = "text " placeholder = "建议 填 
写 企业 邮箱 " autocomplete = "off " MaxLength = "40 " tabindex= "10 " /> 

< input id= "userpsd" name = "userpsd" type = "password" class = "text" required = "required" 
onpaste = " return false;" MaxLength = "20" tabindex = "2" onfocus = "displayPsd( );" onblur = 
"checkPassword(1);" /> 


4. 定义 JavaScript 了 困 数 


function $ (id){return document. getElementById(id);} 
function checkPassword(n){ /* 验证 密码 和 确认 密码 是 否 正确 * /} 


function checkName( ){/* 验证 用 户 名 是 否 正确 x* /} 
function displayInfo(){/ * 获得 焦点 时 ,正常 提示 信息 * /} 
function createCode() {/* 产生 验证 码 * /} 

function validateCode() {/* 验证 验证 码 是 否 正确 * /} 


5. 实 训 过 程 与 指导 

编程 实现 “当当 网 企业 用 户 注册 ”页 面 , 具 体 步骤 如 下 : 

(1) 文档 结构 的 创建 

@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 


页 ,在 首 行 插入 注释 语句 , 注 明 程序 名 称 为 prj_8_1. html。 格 式 如 下 : 


过 

@ 保存 文件 。 输 入 文件 名 为 prj_8_1. html, 选 择 编码 类 型 为 UTF-8, 然 后 保存 文件 。 
(2) 页 面 内 容 设计 

在 body 标记 中 插入 图 层 ,HTML5 新 增 结构 元 素 .表单 .表格 .表单 控件 等 标记 ,完成 页 


面 布 局 设计 。 


g@ 在 body 中 插入 1 个 id 为 divl 的 div。 
@ 在 div 中 插入 1 个 id 为 header 的 header 标记 ,用 于 显示 Logo 和 标题 ,其 中 插入 1 


个 hl 标记 ,其 内 容 为 ”-- 企 业 用 户 注册 ”。 


@@ 在 div 中 插入 1 个 id 为 section 的 section 标记 ,并 在 其 中 插入 1 个 图 像 img 标记 ,其 


src 属性 值 为 login_qiye4. png。 


@ 在 div 中 插入 1 个 class 为 zhanghu_info 的 子 div, 其 内 搬入 1 个 class 为 zhanghu_ 


text 的 p 标记 ,p 的 内 容 为 “账户 信息 ”。 


@ 在 div 中 插入 1 个 id 为 registerForm 的 form 标记 ,在 其 中 分 别 插入 表格 和 表单 元 


素 。 具 体内 容 如 下 : 


。 账户 信息 
a 在 表单 中 插入 1 个 class 为 body 的 div 标记 。 在 其 中 插入 1 个 3 行 3 列 的 表格 , 主 


要 用 来 设计 “账户 信息 ”。 设 置 表格 边框 为 0、 单 元 格 边 距 和 单元 格 间距 均 为 0、 宽 度 
为 100%。 


b. 3 行 中 第 1 列 内 容 分 别 为 “用 户 名 ”设置 密码 “确认 密码 ”。 
c. 每 行 第 2 列 与 第 3 列 合并 ,3 个 单元 格 中 分 别 插入 1 个 单行 文本 输入 框 (id 为 


username) ,2 个 密码 输入 框 (id 分 别 为 userpsd、userrepsd) 、 用 于 显示 “VV”X” 符 号 的 span 
标记 (id 分别 为 info_name_flag、info_password_flag、info_repassword_flag,class 均 为 info_ 
flag) 和 显示 提示 及 出 错 信 息 的 div 标记 (id 分 别 为 info_name、info_repassword、info_ 
repassword,class 均 为 info_area) ,其 内 插入 的 标记 及 标记 相关 属性 的 设置 代码 如 下 所 示 : 


<tr class = "b"> 
<td class = "t"> 用 户 名 </td> 
< td colspan = "2"> 


oo 对 闪 
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< input id = "username" name = "username" type = "text" class = "text" MaxLength = "20" 
tabindex = "1" onfocus = "displayInfo();" onblur = "checkName();" /> 

< span id= "info name flag" class = "info flag"></span><! 一 显示 ~ 、X --> 

<div id= "info name" class = "info area" style= "z- index: 1"></div> <! -- 显示 提示 信 


。 企业 及 联系 人 信息 

a, 在 表单 中 插入 1 个 class 为 giye_info 的 div 标记 。 在 其 中 插入 1 个 class 为 qiye_ 
info_pic 的 子 div 和 1 个 class 为 table_qiye 的 10 行 4 列 的 表格 ,主要 用 来 设计 “企业 及 联系 
人 信息 ”。 在 子 div 中 插入 1 个 class 为 zhanghu_text 的 p 标 记 , 其 内 容 为 “企业 及 联系 人 信 
息 ”。 设置 表格 边框 为 0、 单元 格 边 距 和 单元 格 间 距 均 为 0、 宽度 为 100%。 

b. 10 行 中 第 1 列 内 容 分 别 为 “公司 名 称 “ 公 司 地 址 “公司 邮箱 ”“ 固 定 电话 ” &.nbsp;” 
“联系 人 姓名 ”手机 号 “验证 码 ”*&.nbsp;”&nbsp;”。 

c. 每 行 第 2 一 4 列 合并 ( 除 固定 电话 外 ) ,分别 插入 表单 元 素 、 图 层 及 span 等 标记 。 具 
体 插 入 标记 及 内 容 如 下 所 示 : 

(a) 第 1 行 第 2 个 单元 格 中 分 别 插入 1 个 单行 文本 输入 框 ,设置 占 位 符 , 其 内 容 为 “请 
填写 单位 执照 上 的 名 称 ”、 最 大 长 度 为 60、 自 动 完 成 填充 为 off。 分 别 插入 span、div 标记 。 
其 实现 代码 与 账户 信息 设置 类 似 。 

(b) 第 2 行 第 2 个 单元 格 中 分 别 插入 1 个 div, 在 其 中 搬入 3 个 span 标记 ,每 个 span 标 
记 中 插入 1 个 列表 项 ,分 别 插入 省 .市 .区 选项 信息 ,不 要 求实 现 之 间 的 关联 功能 。 

(c) 第 3 行 第 2 个 单元 格 中 分 别 插入 1 个 单行 文本 输入 框 ( 设 置 占 位 符 , 其 内 容 为 “请 
填写 街道 地 址 ”) 1 个 span 和 1 个 div 标记 ,其 实现 代码 与 账户 信息 设置 类 似 。 

(d) 第 4 行 第 2 个 单元 格 中 分 别 插入 1 个 email 文本 输入 框 , 设 置 占 位 符 , 其 内 容 为 “ 建 
议 填 写 企业 邮箱 ”最 大 长 度 为 40 .自动 完成 填充 为 off。 

(e) 第 5 行 第 2 个 单元 格 中 分 别 插入 3 个 单行 文本 输入 框 , 设 置 占 位 符 , 其 内 容 为 “请 
填写 单位 执照 上 的 名 称 ” 最 大 长 度 为 60 自动 完成 填充 为 off ,其 余 同 上 。 

(f) 第 6 行 第 2 个 单元 格 中 分 别 插入 1 个 单行 文本 输入 框 ,最 大 长 度 为 32 ,其 余 同 上 。 

(g) 第 7 行 第 2 个 单元 格 中 分 别 插入 1 个 单行 文本 输入 框 , 设 置 模式 patter 为 
“1[358][0-9]{9} $”, 其 内 容 为 “请 填写 单位 执照 上 的 名 称 ”、 最 大 长 度 为 11 ,其 余 同 上 。 

(h) 第 8 行 第 2 个 单元 格 中 搬入 1 个 单行 文本 输入 框 ,输入 验证 码 。 设 置 占 位 符 , 其 内 
容 为 “请 输入 验证 码 ”、 最 大 长 度 为 4, 设 置 class 为 “text tel_width”, 设 置 失去 焦点 时 验证 输 
入 内 容 是 否 正确 , 绑 定 函数 为 validateCode(); 插入 1 个 id 为 info_code、class 为 info_flag 
的 span 标记 ,用 于 显示 正确 与 错误 的 符号 。 插 入 1 个 id 为 checkCode 的 span 标记 ,用 于 显 
示 生 成 的 验证 码 , 当 单 击 它 时 可 以 更 新 验证 码 ; 插入 超 链 接 , 设 置 链接 的 标题 为 “ 换 张 图 ”， 
并 设置 onclick 事件 句柄 , 绑 定 函数 为 createCode() ,其 余 同 上 。 

(i) 第 9 行 第 2 个 单元 格 中 插入 1 个 span 标记 。 在 其 中 插入 1 个 复 选 框 ,内 容 为 “我 已 
阅读 并 同意 ”; 插入 标题 为 (当当 交易 条 款 兴 当当 社区 条 款 》 的 两 个 超 链 接 ,href 为 http:// 
help. dangdang. com/ details/pagel2、http://help. dangdang. com/ details/page42 。 


0) 第 10 行 第 2 个 单元 格 中 插入 1 个 class 为 btn_login 的 超 链 接 , 标 题 内 容 为 “立即 
注册 ”。 

(3) 表现 设计 

在 style 标记 中 定义 div .header section ,form span 和 hl 等 标记 的 样式 。 具 体 样 式 定 
义 要 求 如 下 : 

@ 定义 全 局 样式 。 样 式 为 填充 和 边界 均 为 0。 

@ 定义 div 标记 # divl 样式 。 样式 为 边界 上 下 50px、 左 右 自 动 ,背景 颜色 # FFFFFF， 
宽度 1001px, 高 度 1300px, 边 框 lpx, 虚线 ,颜色 #FAFAFA, 边 框 阴 影 分 别 为 一 10px、 
lO0px、#FlF1F]1。 

@ 定义 header 标记 #header 样式 。 样 式 为 宽度 1001px、 高 度 71px, 边 框 5px、 实 线 、 红 
色 ,背景 图 像 ddnewhead_logo. gif 不 重复 、 居 左上 部 。 

@ 定义 #header 中 hl 样式 。 样 式 为 字体 大 小 28px、 字 体 名 称 微软 雅 黑 、 左 填充 25px、 
顶部 填充 200px。 

@ 定义 section 标记 #section 样式 。 样 式 为 文本 水 平 居 中 ,宽度 100% ,边界 上 下 0px、 
左右 自动 。 其 中 img 样式 为 宽度 100% 。 

@ 定义 div 标记 . zhanghu_info 样式 。 样 式 为 宽度 19px, 高 度 21px, 边 界 上 下 12px\ 左 
右 187px, 背 景 图 像 icon_qy. png、 不 重复 . 居 左 上 部 。 

@ 定义 p 标记 . zhanghu_text 样式 。 样 式 为 宽度 122px, 字 体 大 小 15px, 边 界 上 下 
8px、 左 右 33px, 字 体 粗 细 600。 

人 @) 定义 form 标记 # registerForm 样式 。 样 式 为 宽度 100% 、 高 度 700px。 

@ 定义 div 标记 . body 样式 。 样 式 为 边界 上 下 0px、 左 右 150px, 颜 色 井 9e9eg9e。 

四 定义 tr 标记 .b 样式 。 样 式 为 高 度 65px。 

@ 定义 td 标记 . t 样式 。 样 式 为 宽度 268px, 高 度 30px, 左 填充 10px, 上、 下、 右 填 充 均 
为 0, 水 平 居 右 对 齐 ,垂直 居 顶 对 齐 ,颜色 # 646464, 字 体 大 小 14px, 行 高 30px, 字 体 名 称 微 

四 定义 input 标记 . text 样式 。 样 式 为 宽度 289px, 高 度 18px, 布 边界 10px, 填 充 上 下 
5px、 左 右 10px, 字 体 大 小 14px. 行 高 18px、 字 体 名 称 微软 雅 黑 、 显 示 方 式 行内 块 方 式 、 圆 形 
边框 2px、 颜 色 #969696。 

@@ 定义 div 标记 . qiye_info_pic 样式 。 样 式 为 宽度 19px, 高 度 20px, 边 界 上 下 0px、\ 左 
右 35px, 背 景 图 像 icon_qy. png、 不 重复 X 方向 0、Y 方向 一 29px。 

@ 定义 table 标记 . table_qiye 样式 。 样 式 为 顶部 20px、 位 置 为 相对 定位 。 

四 定义 div 标记 . qiye_info 样式 。 样 式 为 位 置 为 相对 定位 。 

四 定义 span 标记 . red_flag 样式 。 样 式 为 字体 粗细 特 粗 、 字 体 大 小 16px、 颜 色 red。 

外 定义 span 标记 . green_flag 样式 。 样 式 为 字体 粗细 特 粗 .字体 大 小 16px、 颜 色 
井 00FF99 。 

图 定义 div 标记 . black_flag 样式 。 样 式 为 颜色 黑色 。 

四 定义 div 标记 . info_area 样式 。 样 式 为 宽度 320px、 高 度 30px、 字 体 大 小 16px。 

四 定义 input 标记 . tel_width 样式 。 样 式 为 宽度 80px、 高 度 lem。 

团 定义 input 标记 . btn_login 样式 。 样 式 为 宽度 260px, 高 度 35px, 圆 形 边 框 半 径 
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12px, 背 景 颜色 红色 ,水 平和 垂直 均 居 中 对 齐 ,字符 装饰 none, 填 充 上 下 10px\ 左 右 30px, 边 
界 上 下 20px、\ 左 右 自 动 ,颜色 #FFFFFF。 

四 定义 span 标记 . code 样式 。 样 式 为 宽度 150px, 高 度 60px, 行 高 30px, 水 平和 垂直 
均 居 中 对 齐 ,边框 1px、\ 虚 线 .红色 ,光标 pointer, 字 符 间 距 3px, 填 充 上 下 2px、 左 右 3px, 字 
体 大 小 18px, 字 体 名 称 Arial, 字 体 样式 斜体 ,字体 粗细 特 粗 , 颜 色 蓝 色 。 

四 定义 a 标记 样式 。 样 式 为 字符 装饰 none、 字 体 大 小 16px、 颜 色 #288bc4。 

加 定义 a:hover 样式 。 样 式 为 字符 装饰 下 画 线 。 

(4) 行为 设计 

O@ 检查 用 户 名 、 密 码 、 重 置 密码 的 JavaScript 代码 : 


< script type = "text/javascript "> 


Var errorflag = "Xx"; 
var rightflag = "V/"; 
function checkPassword(n) { // 根 据 参 数 检查 密码 或 重 置 密码 
var psd = $ ("userpsd").value; // 取 密码 
var repsd = $ ("userrepsd").value; // 取 重 置 密码 
var len prd = psd. length; // 计 算 密码 长 度 
Var len repsd = repsd. length; // 计算 重 置 密码 长 度 
switch(n) { // 检 查 密码 
case1:{ 


if(len prd> 20 || len_prd< 6) { // 显 示 x 号 和 提示 信息 
$ ("info password").className = "red flag "; 
$ ("info_password"). innerHTML =" 密 码 长 度 为 6 一 20 个 字符 "; 
$ ("info password flag").className = "red flag "; 
$ ("info password flag"). innerHTML = errorflag; 

} else{ // 显 示 号 和 提示 信息 
$ ("info_password_flag").className = "green flag "; 
$ ("info_password_flag"). innerHTML = rightflag; 
$ ("info_password").className = "info area "; 
$ ("info_password"). innerHTML = " "; 

} 

break; 

1 
case 2: { // 检 查 重复 密码 
if(len_repsd> 20 || len repsd<6) { // 显 示 x 号 和 提示 信息 
$ ("info_repassword").className = "red flag "; 
$ ("info_repassword"). innerHTML = "密码 长 度 为 6- 20 个 字符 "; 
$ ("info_repassword flag").className = "red flag "; 
$ ("info_repassword flag"). innerHTML = errorflag; 

} else{ // 显 示 ~/ 号 和 提示 信息 
$ ("info_repassword_flag").className = "green flag "; 
$ ("info repassword flag"). innerHTML = rightflag; 
$ ("info repassword").className = "info area "; 
$ ("info repassword"). innerHTML = " "; 

1 

if(psd != repsd) { // 显 示 x 号 和 提示 信息 
$ ("info_repassword" ). className = "red flag "; 


$ ("info_repassword"). innerHTML = "密码 与 确认 密码 不 同 ! "; 
$ ("info_repassword flag").className = "red flag "; 
$ ("info_repassword_flag"). innerHTML = errorflag; 
} else{ // 显 示 / 号 和 提示 信息 
$ ("info repassword flag").className = "green flag"; 
$ ("info repassword flag"). innerHTML = rightflag; 
$ ("info repassword").className = "info area "; 
$ ("info repassword"). innerHTML = " "; 
} 
break; 


} 
| 
function $ (id) {return document. getElementById(id);} // 通 过 ID 获取 页 面 元 素 
function checkName() { // 检 查 用 户 名 
Var name = $ ("username").value; 
//4- 20 个 字符 ,可 由 小 写字 母 ,中文 ,数字 组 成 ,用 户 名 不 能 为 空 
name_len = name. length; 
if((name len<4 || name len> 20) || name len == 0 || (name len>0 && name len < 4)) { 
$ ("info_name").className = "red flag "; 
$ ("info_name"). innerHTML = "用 户 名 非 空 , 且 长 度 为 4- 20 个 字符 "; 
$ ("info name flag").className = "red flag"; 
$ ("info name flag"). innerHTML = errorflag; 
} else{ 
$ ("info name flag").className = "green flag"; 
$ ("info name flag"). innerHTML = rightflag; 
$ ("info name").className = "info area"; 
$ ("info name"). innerHTML = " "; 
} 
: 
function displayInfo() { 
$ ("info name").className = "black flag"; 
$ ("info_name"). innerHTML = "4- 20 个 字符 ,由 小 写字 母 中文. 数字 组 成 "; 


// 获 得 焦点 时 ,正常 提示 信息 


} 

function displayPsd() { 
$ ("info_password").className = 
$ ("info_password"). innerHTML = 


// 显 示 密码 提示 信息 
"black flag"; 
"密码 为 6- 20 个 字符 , 由 英文 ,数字 及 符号 组 成 "; 
function displayRePsd() { 
$ ("info_repassword" ) .className 
$ ("info_repassword"). innerHTML = 


// 显 示 重 置 密 码 提示 信息 


"black flag"; 
"密码 为 6- 20 个 字符 ,可 由 英文 .数字 及 符号 组 成 "; 
} 


</script > 


@ 生成 验证 码 的 JavaScript 代码 : 


/x prj_8_1_verifycode.js */ 


Var code; 
function createCode() { 


// 随 机 产生 验证 码 
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code = ""; 


var codeLength = 4; // 验 证 码 的 长 度 
// 在 主 HTML 文件 中 插入 显示 验证 码 的 元 素 , 如 div/span 等 
Var checkCode = document. getElementById("checkCode" ) 
var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7，8，9，'av 'b', ‘ce', 'd', ev 'f', 'g', h', iv 
本 
人 ep op et Ht We sb et te 
// 所 有 候选 组 成 验证 码 的 字符 ,当然 也 可 以 用 中 文 的 
for(var i = 0; i< codeLength; i++) 
{ var charNum = Math. floor(Math. random() * 52); 
code += codeChars[charNum]; 
} 
if(checkCode) { 
checkCode. className 
checkCode. innerHTML 


"code"; 
code; 
} 
} 
function validateCode() { // 校 验 验 证 码 
// 调 用 程序 中 需要 在 表单 中 插入 1 个 id 为 inputCode 的 单行 文本 输入 框 
var inputCode = document. getElementById("inputCode"). value; 
if(inputCode. length <= 0) { 
//alert(" 请 输入 验证 码 !"); 
$ ("info code").className = "red flag"; 
$ ("info_code"). innerHTML = errorflag; 
$ ("info code_ flag").className = "info area black flag"; 
$ ("info_code_flag"). innerHTML = "请 输入 验证 码 !"; 
}else if(inputCode. toUpperCase() != code. toUpperCase()) { 
//alert(" 验 证 码 输入 有 误 !"); 
$ ("info code"). className = "red flag"; 
$ ("info_code"). innerHTML = errorflag; 
$ ("info_code_flag").className = "info_area black flag"; 
$ ("info_code_flag"). innerHTML = "验证 码 输入 有 误 !"; 
createCode( ); 
} else{ 
//alert(" 验 证 码 正 确 !"); 
$ ("info_code").className = "green flag"; 
$ ("info_code"). innerHTML = rightflag; 
$ ("info_code_flag").className = "info area"; 
$ ("info code flag"). innerHTML = " "; 


(5) 保存 并 查看 网 页 


设计 完 代 码 后 ,保存 网 页 文件 。 通 过 浏览 器 查看 页 面 ,填写 相关 表单 数据 逐 项 进行 


项 目 23 HTMLS 结构 元 素 页 面 布 局 设计 


1. 实 训 要 求 
采用 HTML5 新 增 结构 元 素 完 成 常用 页 面 布 局 设计 ,效果 如 图 1-8-3 所 示 。 


EE eg 
清华 守 - 规 划 数 材 - 实 验 教 村 务 3 版 资源 及 代码 20170526/ 实 8/ 实 8- 代 码 /pfL_8_2 html?_hbt=15025922.、Q 从 | 所 
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JavaScript 


| 








Copyright © 2017-2020 Web 戎 恋 开 发 工作 宇 - 业务 开发 部 - 网 站 建设 
127.0.0.1:8020/ 清 华 社 - 规 划 教 材 - 实 闫 教材 第 3 版 次 源 及 代码 20170526/ 实 加 8/ 实 训 8- 代 码 /prj_8_2html?_hbt=1502592238056s 








1-8-3 用 HTML5 新 增 结构 元 素 设 计 页 面 布局 


功能 要 求 如 下 : 

(1) 采用 HTML5 新 增 结构 元 素 header article .section ,aside footer 等 标记 对 页 面 进 
行 分 区 ,然后 分 别 定义 每 个 标记 的 CSS 样式 。 

(2) 按 图 1-8-3 所 示 效 果 定义 页 面 导航 栏 , 并 设置 超 链 接 (href 为 " 井 ”) 。 

(3) 页 面 中 所 使 用 的 图 像 , 按 出 现 的 先后 顺序 分 别 为 prj_8_2_logo. png、prj_8_2_html5_ 
logo. png\prj_8_2_css3_logo. png ,prj_8_2_javascript_logo. png ,prj_8_2_html5. png。 

(4) 主体 部 分 放 在 图 层 中 。 图 层 中 分 别 插入 article、aside 标记 。article 标记 分 别 插入 
3 个 section 标记 ,在 每 一 个 section 标记 中 分 别 插入 3 幅 图 。aside 标记 分 别 插入 figure 和 
figcaption 标记 ,并 在 figure 标记 中 插入 图 像 brj_8_2_html5. png。 

2. 实 训 内 容 

(1) HTML5 新 增 结构 元 素 的 应 用 。 

(2) 结构 元 素 样式 定义 。 

(3) 图 像 标记 的 应 用 。 

(4) 超 链接 标记 的 应 用 。 

(5) 结构 元 素 浮 动 属性 的 应 用 。 

3. 实 训 所 需 知 识 点 

(1) 页 眉 header 标记 


< header id = "header"></header> 
(2) 样式 style 标记 
< style type = "text/css"> 


< {padding: Opx;margin: Opx;} 
</style> 
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(3) 文章 article 标记 


<article id = "article"> 
< section id = "section"> 
</section> 

</article> 


(4) 导航 nav 标记 


<nav id= "nav"> 
<ul> 
<1i><a href =" 井 "> 首页 </a></1i> 
<1li><a href ="#"> HTML5 </a></li> 
<1i><a href ="#">CSSs3</a></li> 
</ul> 
</nav> 


(5) 页 脚 footer 标记 


< footer id = "footer"> 


<p> Copyright &copy; 2017 - 2020 Web 前 端 开发 工作 室 - 业务 开发 部 - 网 站 建设 </p> 


</footer > 
(6) 侧 边 aside 标记 


<aside id= "aside"> 
<figure> 
< ijmg src= "prj_8_2_htm15. png"> 
<figcaption> HTML5 结构 元 素 侧 边 aside </figcaption> 
</figure> 
</aside> 


(7) 图 像 img 标记 
< img src= "prj 8_2_javascript_logo. png" /> 


4. 实 训 过 程 与 指导 

采用 HTML5 新 增 结构 元 素 完成 常用 页 面 布 局 设计 ,具体 步骤 如 下 : 

(1) 文档 结构 创建 

@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程序 名 称 为 prj_8_2. html。 格 式 如 下 : 


<b== pri 2. hal ==> 
@ 保存 文件 。 输 入 文件 名 为 prj_8_2. html, 选 择 编 码 类 型 为 UTF-8, 然 后 保存 文件 。 


(2) 页 面 内 容 设 计 
在 body 标记 中 插入 HTML5 新 增 结构 元 素 、img、 无 序列 表 、 插 图 及 插图 标题 等 标记 ， 


完成 页 面 布局 设计 。 

@ 在 body 中 插入 1 个 header 标记 ,并 定义 id 为 "header”。 

@ 在 body 中 插入 1 个 nav 标记 ,定义 id 为 "nav”。 在 其 中 插入 含有 6 个 列表 项 的 无 序 
列表 , 列表 项 均 为 超 链 接 ,链接 的 标题 分 别 为 “首页 ”HTML5、CSS3、 JavaScript、 
DOM 、BOM 。 

@ 在 body 中 插入 div 标记 ,并 在 其 中 分 别 插入 1 个 article 标记 和 aside 标记 。 

a. 在 article 标记 中 分 别 插入 3 个 section 标记 ,并 在 每 个 section 标记 中 插入 1 个 图 
像 。 图 像 分 别 为 brj_8_2_html5_logo. png、prj_8_2_css3_logo. png、prj_8_2_javascript_ 
logo. png。 

b. 在 aside 标记 中 分 别 插入 figure ,figcaption 和 img 标记 ,插图 标题 为 “HTML5 结构 
元 素 侧 边 aside”, 图 像 名 为 prj_8_2_html5. png 

@ 在 body 中 插入 footer, 并 在 其 中 分 别 插入 1 个 pp 标记 ,内 容 为 “Copyright Rcopy; 
2017-2020 Web 前 端 开发 工作 室 -业务 开发 部 -网 站 建设 ”。 

(3) 表现 设计 

在 style 标记 中 定义 HTML5 新 增 结构 元 素 和 新 标记 的 样式 。 具 体 样式 定义 要 求 
如 下 : 

g@ 定义 全 局 样式 。 样 式 为 填充 和 边界 均 为 0。 

@@ 定义 header 标记 样式 。 样 式 为 宽度 100% 、 高 度 60px、 填 充 10px\ 背景 颜 色 
#4B5B6B ,背景 图 像 prj_8_2_logo. png。 

@ 定义 吕 样式。 样式 为 宽度 100% \ 高 度 80px\ 背 景 颜色 #D0C0B0 文本 水 平 居 中 、 列 
表 样 式 类 型 none。 

@ 定义 样式。 样式 为 宽度 160px, 高 度 40px, 显 示 为 行内 块 方式 ,字体 大 小 28px, 填 
充 上 下 20px、 左 右 10px。 

@ 定义 超 链接 a:link、a:visited、a:active 样式 。 样 式 为 字符 装饰 none。 

@ 定义 超 链接 a: hover 样式 。 样 式 为 宽度 160px, 高 度 80px, 填 充 上 下 20px、 左 右 
10px\ 背 景 颜色 井 CCFF99 。 

@ 定义 div 的 #main 样式 。 样 式 为 宽度 100%、 高 度 500px\ 背 景 颜色 #FEFEFE。 

定义 article 的 #article 样式 。 样 式 为 宽度 75%、 高 度 500px\ 背 景 颜色 #DBDACA、 
向 左 浮动 。 

@@ 定义 section 的 . section 样式 。 样 式 为 宽度 320px、 高度 440px\ 文 本 居中 显示 、 垂 直 
居中 对 齐 .边界 20px\ 向 左 浮动 .边框 1px、 虚 线 、 并 006600。 

四 定义 img 的 样式 。 样 式 为 宽度 300px、 高 度 400px、 边 界 10px。 

@ 定义 aside 的 #aside 样式 。 样 式 为 宽度 25%、 高 度 500px\ 背 景 颜色 并 9F9F9A、 文 
本 居中 显示 垂直 居中 对 齐 、 向 右 浮动 。 

@@ 定义 footer 的 #footer 样式 。 样 式 为 清除 两 边 浮动 ,宽度 100%% ,高 度 80px, 背 景 颜 
色 #EAEADA, 文 本 居中 显示 ,填充 上 下 20px、 左 右 自 动 。 

图 定义 footer 中 的 p 样式 。 样 式 为 字体 大 小 20px、 高 度 26px、 顶 部 填充 25px。 

(4) 保存 并 查看 网 页 

完成 代码 设计 后 ,保存 网 页 文件 ,通过 浏览 器 查看 效果 。 
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项 目 24 H3C- 新 华 三 集团 行业 案例 CSS3 特效 页 面 设计 


1. 实 训 要 求 

以 “H3C- 新 华 三 集团 ”公司 主页 (http://www. h3c. com/cn/) 中 的 “行业 ”案例 局 部 页 
面 为 例 ,采用 HTML5 和 CSS3 新 特性 完成 特效 页 面 的 布局 设计 ,效果 如 图 1-8-4 一 图 1-8-6 
所 示 。 

功能 要 求 如 下 : 

(1) 采用 HTML5 新 增 结构 元 素 header、article、section、nav 等 标记 对 页 面 进行 分 区 ， 
然后 分 别 定义 每 个 标记 的 CSS 样式 ,如 图 1-8-4 所 示 。 


@ [GO 1270018020/ 丙 入- 规 WH 村- 坟 失 下 村 视 3 本 可 mi?_hbt=1502587784940 aww :有 








山 务 通 东 政务 











图 1-8-4 H3C- 新 华 三 集团 行业 案例 局 部 初始 页 面 


(2) 设置 新 H3C 公司 页 面 的 导航 栏 ,并 设置 超 链接 (href 为 “#”) ,导航 区 域 背景 图 像 
不 重复 、 居 左上 部 ,背景 颜色 为 #404143。 

(3) 当 用 户 鼠 标 在 下 列 3 幅 图 像 上 盘旋 时 ,在 该 层 的 上 层 会 出 现 文字 图 层 , 同 时 背景 图 
像 将 进行 放大 ,超出 部 分 将 会 隐藏 起 来 ,如 图 1-8-5 和 图 1-8-6 所 示 。 
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图 1-8-5 H3C- 新 华 三 集团 行业 案例 局 部 鼠标 盘旋 时 特效 页 面 





1-8-6 鼠标 盘旋 时 指向 “查看 更 多 ”时 的 超 链接 效果 


2. 实 训 内 容 

(1) HTML5 新 增 结构 元 素 的 应 用 。 
(2) 结构 元 素 样式 定义 。 

(3) 采用 无 序列 表 设 计 导 航 栏 。 

(4) 超 链接 和 图 像 标 记 的 应 用 。 

(5) CSS3 过 渡 和 2D 转换 的 应 用 。 
3. 实 训 所 需 知识 点 

(1) 页 眉 header 标记 


< header id = "header"></header > 


(2) 样式 style 标记 
< style type = "text/css"> 


* {padding: Opx;margin: Opx; } 
</style> 


(3) 文章 article 标记 


<article id = "article"></article> 


(4) 导航 nav 标记 


<nav id = "nav"> 
<ul> 
<1i><a href ="#"> 产 品 技 术 </a></1i> 
<1i><a href ="#"> 解 决 方案 </a></1i> 
<1li><a href ="#"> 服 务 </a></1i> 


</ul> 
</nav> 


(5) 图 像 img 标记 


< img class = "ratio— img" data— ratio= "0.5631" src= "prj 8 3 2 tianjin.jpg" alt="" /> 
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(6) 图 层 div 标记 


<div id= "h3c_header"> 
<h2 > 行业 </h2 > 
<p></p> 

</div> 


(7) 标题 字 标 记 


<hl class = "fnt_18"> 服 务 浦东 政务 </hl > 
< h2 > 行业 </h2 > 
<h5 class = "fnt_18"> 服 务 天 津 地 铁 </h5 > 


(8) CSS3 过 渡 transition 属性 


transition: property duration timing ~ function delay; 
transition: width 2s; /* 宽度 上 过 渡 2s */ 
transition: all 0.3s; /* 所 有 属性 过 渡 0.3s*/ 


(9) CSS3 2D 转换 transform 属性 


transform: scale(x, y); 
transform: scale(1.1, 1.1); //X、Y 轴 均 放大 1.1 售 


4. 实 训 过 程 与 指导 

采用 HTML5 新 增 结构 元 素 完 成 常用 页 面 布局 设计 ,具体 步骤 如 下 : 

(1) 文档 结构 的 创建 

@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程序 名 称 为 prj_8_3. html, 格 式 如 下 : 


eb 


@ 保存 文件 。 输 入 文件 名 为 prj_8_3. html, 选 择 编码 类 型 为 UTF-8, 然 后 保存 文件 。 

(2) 页 面 内 容 设 计 

在 body 标记 中 插入 HTML5 新 增 结构 元 素 、img、 无 序列 表 、 超 链接 等 标记 ,完成 页 面 
布局 设计 。 

@ 在 body 中 插入 1 个 header 标记 ,并 定义 class 为 “nav-bar”。 

@ 在 header 中 插入 1 个 nav 标记 ,在 其 中 插入 无 序列 表 ,class 为 “nav”。 在 无 序列 表 
中 搬入 6 个 列表 项 ,列表 项 的 内 容 均 为 超 链接 ,链接 的 标题 分 别 为 “产品 技术 ”解决 方案 ” 
“服务 ”新 华 三 大 学 ”合作 伙 伴 ”“ 关 于 我 们 ”。 

@ 在 body 中 插入 div 标记 ,并 定义 id 为 *“h3c_header”, 在 其 中 插入 1 个 section 标记 。 
在 section 标记 中 分 别 插入 1 个 h2 标记 和 2 个 p 标 记 。 

标题 字 和 段落 标记 的 内 容 分 别 为 “行业 ”VCF 架构 是 华 三 * 云 网 融合 ”解决 方案 的 核心 
支撑 ,将 云 计算 、 智 慧 网 络 IT 安全 、 移 动 化 等 解决 方案 融合 拉 通 ”并 通过 软件 定义 与 资源 


编排 ,实现 IT 基础 设施 资源 自动 化 调度 、 弹 性 扩展 、 应 需 而 动 .”。 

@ 在 body 中 插入 div, 并 在 其 中 插入 1 个 article 标记 ,内 容 为 含 3 个 列表 项 的 无 序 
列表 。 

每 一 个 列表 项 的 类 名 均 为 “coLxs-12 col-sm-4”。 列 表 项 中 包含 1 个 类 名 为 hyc_m_img _1 
h3chover tran_scale 的 图 层 div, 在 其 中 分 别 插入 图 像 超 链接 、h5 标题 字 标记 和 另 1 个 div 
( 子 图 层 ), 子 图 层 的 类 名 为 “xih3c_3-10”。 

3 个 列表 项 包含 的 超 链 接 和 图 像 信 息 分 别 如 下 : 

超 链接 的 href 属性 值 分 别 为 : 

。 http://www. h3c. com/cn/Solution/Gov _ Corporation/Government/Success _ Stories/ 

201608/945677_30004_0. htm 

。 http://www. h3c. com/cn/Solution/Gov _ Corporation/Traffic/Success _ Stories/ 

201608/948784_30004_0. htm# 

。 http://www. h3c. com/cn/Solution/Gov_ Corporation/ Education/ Higher _ Education/ 

Success_Stories/201608/948783_30004_0. htm# 

标题 字 h5 的 内 容 分 别 为 : 

。 服务 浦东 政务 

。 服务 天 津 地 铁 

。 服务 上 海 财 经 大 学 

图 像 名 分 别 为 prj_8_3_1_pudong. jpg、prj_8_3_2_tianjin. jpg、prj_8_3_3_shanghai. jpg。 
img 标记 的 类 名 为 “ratio-img”。 

3 个 子 图 层 中 分 别 插入 hl、p\a 标记 。 定 义 hl 的 类 名 为 “fnt_18”, 定 义 超 链接 的 类 名 为 
“bottom_h3c_3-10”。 其 中 包含 的 信息 分 别 如 下 : 

。“ 服 务 浦东 政务 ”“H3C 连续 多 年 保持 政务 信息 化 建设 领域 市 场 份额 第 一 ,在 中 央 部 

委 的 应 用 份额 超过 了 70% ,凭借 对 政务 的 理解 和 先进 的 云 计算 技术 成 为 政务 云 
EE “查看 更 多 ”。 超 链接 的 href 属性 值 同 上 。 

。“ 服 务 天 津 地 铁 ”“H3C 作为 一 家 本 土 化 .专注 在 交通 信息 化 的 解决 方案 供应 商 , 紧 
跟 中 国 交通 信息 化 步伐 ,利用 研发 创新 与 交通 贴身 服务 ,为 交通 信息 化 带 来 更 
多 ”“ 查 看 更 多 ”。 超 链接 的 href 属性 值 同 上 。 

。“ 服 务 上 海 财 经 大 学 ”新 华 三 集团 近日 成 功 中 标 “ 上 海 财 经 大 学 SDN 下 一 代 校 园 
网 ”项目 ,将 对 上 海 财 经 大 学 三 个 校区 的 原 有 核心 网 络 进行 面向 SDN 的 下 一 代 校 园 
网 升级 改造 ,为 两 万 多 名 在 校 师 生 提 供 智 能 化 的 校园 网 络 服务 ”查看 更 多 ”。 超 链 
接 的 href 属性 值 同 上 。 

(3) 表现 设计 

在 style 标记 中 定义 HTML5 新 增 结构 元 素 及 相关 标记 的 样式 ,具体 样式 定义 要 求 
如 下 : 

@ 定义 全 局 样式 。 样 式 为 填充 和 边界 均 为 0。 

@ 定义 header 标记 的 类 nav-bar 样式 。 样 式 为 宽度 100%、 高 度 50px\ 背 景 颜色 
井 404143 背景 图 像 newh3clogo. png\ 不 重复 、 居 左上 部 。 
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@ 定义 dl 的 类 nav 样式 。 样 式 为 左 填充 200px、 顶 部 填充 15px、 列 表 样式 类 型 none。 

@ 定义 .nav 中 的 样式 。 样 式 为 宽度 100px、 文 本 水 平 居 中 对 齐 、 向 左 浮动 。 

@ 定义 .nav 中 的 i 包含 的 超 链接 a:link、a:visited、a:active 的 样式 。 样 式 为 字符 装饰 
none、 颜 色 为 # FFFFFF。 

@ 定义 .nav 中 的 i 中 包含 的 超 链 接 a:hover 样式 。 样 式 为 字符 装饰 none、 颜 色 red。 

@ 定义 div 的 h3c_header 样式 。 样 式 为 文本 水 平 居 中 对 齐 、 顶 部 边界 70px。 

定义 名 为 h3c_header 的 div 中 Pp 的 样式 。 样 式 为 文本 水 平 居 中 对 齐 、 顶 部 边界 8px、 
字体 大 小 14px\ 颜 色 井 7f7f7f。 

@ 定义 div 的 类 h3c_Search_industry_box 样式 。 样 式 为 左右 填充 均 为 40px、 顶 部 边 
界 60px\ 溢 出 隐藏 (overflow :hidden)。 其 中 的 无 序列 表 样 式 为 列表 样式 类 型 none、 边界 上 
下 为 0、 左 右 为 -14px。 无 序列 表 中 的 列表 项 样式 为 向 左 浮动 。 鼠 标 在 列表 项 上 盘旋 时 ,类 
xih3c_3-10 样式 改 为 块 显示 方式 。 

@ 定义 div 的 类 wrap 样式 。 样 式 为 宽度 100% ,左右 边界 分 别 为 自动 。 

@@ 定义 a 的 .bottom_h3c_3-10 样式 。 样 式 为 宽度 101px、 高 度 25px、 边 框 1px、 实 线 、 
井 FFF 文本 居中 显示 、 行 高 23px、 字 体 大 小 12px、 颜 色 #FFF、 块 显示 方式 、 边 界 上 下 为 0、 
左右 自动 .顶部 边界 30px。 

加 定义 img 的 样式 。 样 式 为 所 有 属性 上 过 渡 0. 3sCtransition :all 0. 3s) 。 

图 定义 div 的 类 tran_scale 样式 。 样 式 为 显示 方式 为 块 状 、 溢 出 隐藏 。 其 中 的 图 像 
img 样式 中 所 有 属性 过 渡 0. 3s(transition:all 0. 3s) 。 当 鼠标 在 该 图 层 中 盘旋 时 ,图 像 img 
样式 为 宽度 和 高 度 上 均 放大 1.1 信 (transform:scale(1.1,1.1))。 

四 定义 li 的 类 col-xs-12 样式 。 样 式 为 相对 定位 方式 .左右 填充 均 为 15px、 宽度 
100% 、 最 小 高 度 1px。 

国定 义 下 的 类 col-sm-4 样式 。 样 式 为 宽度 30. 33333333% ,边界 上 下 为 0 左右 0.3%。 

四 定义 标题 字 标记 的 类 fnt_18 样式 。 样 式 为 字体 大 小 18px。 

四 定义 a 标记 的 类 bottom_h3c_3-10 的 hover 样式 。 样 式 为 背景 颜色 #e60012 .颜色 
#FFF。 

图 定义 div 标记 的 类 xih3c_3-10 的 样式 。 样 式 为 背景 图 像 head-blg. png、 显 示 方 式 为 
none 宽度 和 高 度 均 为 100% .左上 部 位 置 均 为 Opx、 绝 对 方式 。 其 中 的 hl 样式 为 颜色 
#FFF\ 水 平 居中 对 齐 、 顶 部 边界 10%。 其 中 的 p 标记 样式 为 颜色 #FFF、 项 部 边界 20px、 
填充 上 下 为 0 ,左右 为 10% 、 高 度 为 4. 6em \ 溢 出 隐藏 。 

四 定义 div 标记 的 类 h3c_m_img_1 的 样式 。 样 式 为 相对 定位 。 其 中 的 img 样式 为 宽 
度 100%。 其 中 的 h5 样式 为 绝对 定位 .背景 图 像 head-blg. png、 宽 度 为 100% 左上 部 位 置 
均 为 0px. 行 高 为 45px、 颜 色 为 #FFF、 填 充 上 下 为 0、 左 右 为 5%。 当 鼠标 在 该 图 层 上 盘旋 
时 ,其 中 的 hl 样式 为 不 显示 (display:none) 。 

四 定义 img 的 类 ratio-img 样式 。 样 式 为 宽度 为 100%% 、 高 度 为 自动 。 

(4) 保存 并 查看 网 页 

完成 代码 设计 后 ,保存 网 页 文件 ,通过 浏览 器 查看 页 面 特效 。 


项 目 25 纯 CSS3 偏光 图 像 画 廊 


1. 实 训 要 求 


采用 
初始 页 面 
常 显示 并 


CSS3 转换 (旋转 、 放 大 等 ) ,边框 阴影 等 新 特性 完成 ( 纯 CSS3 偏光 图 像 画廊 》 设 计 ， 
效果 如 图 1-8-7 所 示 。 当 用 户 移动 鼠标 至 在 某 一 张 图 像 上 盘旋 时 ,该 图 像 恢 复 正 
旦 X、Y 轴 方 向 均 放大 1.5 倍 ,效果 如 图 1-8-8 所 示 。 
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图 1-8-7 纯 CSS3 偏光 图 像 画 廊 初 始 页 面 
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图 1-8-8 纯 CSS3 偏光 图 像 画 廊 鼠 标 盘 旋 时 页 面 
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功能 要 求 如 下 : 

(1) 采用 CSS3 转换 和 边框 阴影 特性 对 图 像 进行 初始 效果 和 鼠标 盘旋 时 的 效果 设计 。 
(2) 采用 无 序列 表 和 图 像 标 记 完 成 基本 页 面 布局 设计 。 
(3) 采用 CSS 对 HTML 元 素 进行 样式 设置 。 

2. 实 训 内 容 

(1) HTML5 新 增 页 面 元 素 header、hgroup 标记 的 应 用 。 
(2) 结构 元 素 样式 定义 。 

(3) 无 序列 表 、 超 链接 、 图 像 标记 的 应 用 。 

(4) CSS3 转换 transform 属性 的 应 用 。 

(5) CSS3 box- shadow 属性 的 应 用 。 

3. 实 训 所 需 知识 点 

(1) 页 眉 header 标记 


< header id = "header"></header > 


(2) 样式 style 标记 


<style type = "text/css"> 
* {padding: Opx;margin: Opx;} 
</style> 


(3) 文章 hgroup 标记 


<hgroup> 

< hl > 纯 CSS3 偏光 图 像 画 廊 </hl > 

< h3 > Copyright &copy; Line25.com. 版 权 所 有 &nbsp;2017 - 2025 </h3 > 
</hgroup > 


(4) 图 层 、 无 序列 表 、 超 链接 与 图 像 标记 


<div class= "gallery"> 
<ul class = "gallery"> 
<1i> 
<ahref ="#" class= "pic—1">< img src= "prj_8_4_1. jpg" title="pic-1"></a> 
</1i> 
</ul> 
</div> 


(5) CSS3 transform 属性 应 用 


— webkit- transform: rotate(angle); /* Safari and Chrome, 旋转 一 定 角度 deg */ 


— moz — transform: rotate( - 5deg); /x* Firefox, 旋转 一 定 角度 */ 
transform: rotate( — 5deg); /* 旋转 一 定 角度 */ 
transform: scale (x,y); /xx 了 分 别 缩放 的 倍数 * / 


transform: scale(1.5,1.5); /*X 了 轴 方 向 分 别 放大 1.5 倍 * / 


4. 实 训 过 程 与 指导 

采用 CSS3 转换 ,边框 阴影 等 新 特性 设计 《 纯 CSS3 偏光 图 像 画 廊 》 页 面 。 具 体 步 又 
如 下 : 

(1) 文档 结构 的 创建 

g@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程 序 名 称 为 prj_8_4. html。 格 式 如 下 : 


< == Dry ds nl ==> 


@ 保存 文件 。 输 入 文件 名 为 prj_8_4. html, 选 择 编码 类 型 为 UTF-8, 然 后 保存 文件 。 

(2) 页 面 内 容 设 计 

在 body 标记 中 插入 div、header、ul\li 及 img 等 标记 ,完成 页 面 布局 设计 。 

@ 在 body 中 插入 1 个 div 标记 ,并 定义 class 为 container。 

@ 在 body 中 插入 1 个 header 标记 ,在 其 中 插入 包含 hl、h3 标记 的 hroup 标记 ,hl、h3 
标记 的 内 容 分 别 为 “ 纯 CSS3 偏光 图 像 画 廊 ”*Copyright &copy; Line25. com. 版 权 所 有 
&.nbsp;2017-2025”。 

@ 在 body 中 插入 1 个 class 为 gallery 的 ul 标记 ,并 在 其 中 分 别 插入 6 个 二 标记。 每 
个 列表 项 中 分 别 插入 1 个 图 像 超 链接 。 

。 6 个 超 链接 的 class 属性 和 图 像 的 title 属性 值 相 同 ,分 别 为 pic-1、pic-2、pic-3、pic-4、 
pic-5 、pic-6 。 

。 6 个 图 像 文 件 分 别 为 prj_8_4_1.jpg、prj_8_4_2. jpg、prj_8_4_3.jpg\prj_8_4_4. jpg、 
Prj_8_4_5.jpg\prj_8_4_6.jpg。 

(3) 表现 设计 

在 style 标记 中 定义 div、header、ul\li 及 img 等 标记 样式 。 具 体 样式 定义 要 求 如 下 : 

O@ 定义 全 局 样式 。 样 式 为 填充 .边界 和 边框 均 为 0。 

@ 定义 body 标记 样式 。 样式 为 背景 图 像 pr]_8_4_wood-repeat. jpg` 背景 颜色 
井 959796 。 

@ 定义 header 样式 。 样 式 为 文本 水 平 居中 ,边界 上 下 0 左右 自动 ,颜色 #EEDDFF。 

@ 定义 div 的 #container 样式 。 样 式 为 宽度 900px, 边 界 上 下 40px\ 左 右 自 动 , 文 本 水 
平 居中 。 

@ 定义 hl 样式。 样式 为 字体 ( 标 粗 ,大 小 48px, 行 高 50px, 字 体 名 称 Helvetica、Arial、 
Sans-serif) .颜色 # EEE、 文 本 阴影 水 平 . 垂 直 5px、 模 糊 距 离 10px、 颜 色 # 000, 字 符 间 
距 5px。 

@@ 定义 h3 a:hover 样式 。 样 式 为 颜色 #90BCD0。 

@ 定义 ul 的 . gallery 样式 。 样 式 为 边界 上 下 40px、 左 右 自 动 , 列 表 样 式 类 型 none。 

定义 article 的 # article 样式 。 样 式 为 宽度 75% 、 高 度 500px\ 背 景 颜色 #DBDACA、 
向 左 浮动 。 

图 定义 1 中 的 超 链 接 li a 样式 。 样 式 为 相对 定位 、 向 左 浮动 .填充 10px, 边 框 1px、 虚 
线 、#FFF ,背景 颜色 #EEE, 边 框 阴影 水 平 2px、 垂 直 4px、 模 糊 距 离 15px、 阴 影 颜色 #333。 

四 定义 ul. gallery li a. pic-l 的 样式 。 样 式 为 z-index 为 1, 旋 转 一 15", 支 持 Safari、 
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Chrome、Firefox 等 浏览 器 。 

加 定义 ul. gallery li a. pic-2 的 样式 。 样式 为 z-index 为 5, 旋 转 一 5", 支 持 Safari、 
Chrome、Firefox 等 浏览 器 。 

四 定义 ul. gallery li a. pic-3 的 样式 。 样式 为 z-index 为 3, 旋转 6", 支 持 Safari、 
Chrome、Firefox 等 浏览 器 。 

图 定义 ul. gallery li a. pic-4 的 样式 。 样 式 为 z-index 为 4, 旋转 18", 支持 Safari、 
Chrome、Firefox 等 浏览 器 . 左 部 距离 一 544px。 

@@ 定义 ul. gallery li a. pic-5 的 样式 。 样 式 为 z-index 为 1, 旋 转 一 15", 支 持 Safari、 
Chrome、Firefox 等 浏览 器 , 左 部 距离 272px, 顶部 距离 一 210px。 

图 定义 ul. gallery li a. pic-6 的 样式 。 样 式 为 z-index 为 6, 旋 转 10", 支持 Safari、 
Chrome、Firefox 等 浏览 器 , 左 部 距离 272px, 顶 部 距离 一 210px。 

四 定义 ul. gallery li a: hover 的 样式 。 样 式 为 z-index 为 10, 旋 转 0", 边 框 阴 影 水 平 
3px, 垂 直 5px, 模 糊 距 离 15px, 阴 影 颜 色 #333,X\Y 轴 方 向 放大 1.5 售 。 

(4) 保存 并 查看 网 页 

完成 代码 设计 后 ,保存 网 页 文件 ,通过 浏览 器 查看 效果 。 


课外 拓展 训练 8 


1. 采用 HTML5 十 CSS3 实现 一 款 注册 表单 实例 ,初始 效果 如 图 1-8-9 所 示 。 当 用 户 输 
入 某 一 项 时 ( 即 文本 框 等 元 素 获 得 焦点 时 ) ,此 文本 框 等 输入 元 素 水 平和 垂直 方向 上 自动 放 
大 1.1 倍 ,如 图 1-8-10 所 示 。 具 体 要 求 如 下 : 
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生 仿 C | @O 127.0.0.1.8020/ 清 华 社 -规划 数 材 -实验 数 ;村 第 3 版 资源 及 代码 20170526/ 实 训 3/ 实 8- 代 码 /project… 全 | 全 








[一 个 人 信息 其 他 信息 
账号 : 个 人 网 址 : 


请 贡 与 隆 富 Pilp ZWww example com 
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图 1-8-9 HTML5 表单 设计 初始 页 面 效 果 图 
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Q | @ 127.0.0.1:8020/ 清 华 社 -规划 禾 材 -实验 教材 第 3 有 版 资源 及 代码 20170526/ 实 浊 l8/ 实 U8- 代 码 /project … 女 | 二 : 
获得 焦点 时 ， 输 入 城 放 大 1-1 信 、 
一 个 人 信息 一 其 他 信息 一 和 
| 账号: | 个 人 网 址 : Pd 
| | ichu 二 Pitp /ww example com x 
密友 | 
| 一 ~ | 策 写 年 开 E23 
| 
重复 密码 : 有 串 

































































1-8-10 HTML5 表单 设计 输入 时 页 面 效果 图 


(1) 在 body 中 插入 1 个 div。 定 义 div 样式 为 边界 上 下 0px、\ 左 右 自动 .宽度 770px、 文 
本 居中 对 齐 。 

(2) 在 div 标记 中 分 别 插入 2 个 表单 域 ,id 分 别 为 account、personal。2 个 表单 域 将 表 
单元 素 进行 分 组 ,1 组 为 个 人 信息 ,分 别 有 账 号 、 密 码 、 重 复 密码 、 邮 箱 地 址 。 另 1 组 为 其 他 
信息 ,分 别 有 个 人 网 址 \ 年 龄 .月 薪 、 描 述 。 插 入 1 个 提交 按钮 ,如 图 1-8-9 所 示 。 其 中 月 薪 
的 值 输出 在 右边 的 span 标记 (id 为 rangevalue) 中 ,具体 实现 代码 如 下 : 


<script> 
function showValue(value) { /* 显示 月 薪 */ 
document. getElementById( "rangevalue"). innerHTML = value; 
| 


</script > 


(3) 所 有 输入 项 均 设置 占 位 符 placeholder 属性 ,其 具体 内 容 如 图 1-8-9 所 示 , 占 位 符 样 
式 定义 参照 如 下 代码 实现 : 


input: - webkit ~ input ~ placeholder, textarea: - webkit — input ~ placeholder{ 
/* 将 占 位 符 中 提示 信息 颜色 定义 为 浅 灰 色 * / 
color: #aaa; 
font — style: italic; 
text 一 shadow: 1px lpx 0 #fff; 
) 
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/* 考虑 到 浏览 器 的 兼容 性 ,参照 如 下 代码 设计 不 同 的 浏览 器 效果 * / 
input: - webkit ~ input — placeholder { /* WebKit browsers*/ 
color: #999;font — size:14px; } 
input: — moz— placeholder { /* Mozilla Firefox 4 to 18*/ 
color: #999;font - size:14px; } 
input: - moz — placeholder { /* Mozilla Firefox 19+ */ 
color: #999;font — size:14px; } 
input: - ms- input- placeholder { /* Internet Explorer 10+ */ 
color: #999;font — size:14px;} 
/* 必 填 项 `\ 有 效 项 和 无 效 项 ,参照 下 列 代码 设置 页 面 效果 */ 
input. textbox:required { 
background: url('project 8_1_ required. png') no - repeat 200px 5px #FOFOEF; 
background: url('project 8_1 required. png') no - repeat 200px 5px, ~— webkit — 
gradient(linear, left top, left bottom, from(#E3E3E3), to(# FFFFFF)); 
| 


(4) 页 面 背景 图 像 文 件 为 project_8_1_bg. jpg, 输 入 域 的 背景 图 像 有 3 个 ,分 别 是 必 填 
项 project_8_1_required. png、 有 效 项 project_8_1_valid. png、 无 效 项 project_8_1_ 
invalid. png。 

(5) 程序 名 称 为 project_8_1. html。 

注 : 参考 网 址 为 http://blog. csdn. net/xuweilinjijis/article/ details/8814151。 

2. 编写 程序 实现 “CSS3 过 渡 动画 画廊 ”程序 。 利 用 CSS3 过 渡 特 性 ,让 每 幅 图 像 初 始 旋 
转 不 同 的 角度 ,页 面 效果 如 图 1-8-11(a) 所 示 ; 当 用 户 将 鼠标 在 某 一 图 像 上 盘旋 时 ,图 像 位 
于 顶层 ,并 在 1. 5s 后 恢复 正常 显示 ,如 图 1-8-11(b) 所 示 。 具 体 要 求 如 下 : 

(1) 图 像 名 分 别 为 project_8_2_1. jpg、project_8_2_2. jpg、project_8_2_3. jpg、project_8_2_ 


4.jpg、project_8_2_5.jpg、project_8_2_6. jpg。 


(2) 背景 图 像 使 用 可 缩放 矢量 图 形 , 文 件 名 为 project_8_2_background. svg。 在 浏览 器 


中 的 效果 如 图 1-8-12 所 示 。 其 中 黑色 部 分 的 透明 度 alpha) 值 为 1, 将 完全 显示 其 下 方 的 图 
像 区 域 ,而 其 余部 分 的 透明 度 为 0Calpha 值 ) ,将 完全 覆盖 其 下 方 的 图 像 区 域 。 
(3) 图 像 放置 参考 代码 如 下 ， 


<div id= "imgl"> 
< ijmg src= "project_8_2_1. jpg"> 
< span > Image 1 caption </span> 
</div> 


(4) 需要 使 用 CSS3 遮盖 (Chrome 和 Firefox 支持 ) 的 mask-box-image 属性 : 


— webkit ~ mask ~ box— image: <uri><top><right><bottom><left><x repeat> <y repeat >; 
/* 设置 格式 */ 
#9gallery img { /* 使 用 Css3 遮 罩 */ 
— webkit — mask — box— image: url('project 8 2 background. svg'); 
— webkit ~ mask — repeat: none; 


(5) 程序 名 称 为 project_8_2. html。 


-一 一 -es 











(a) 初始 时 效果 


图 1-8-11 CSS3 过 渡 动 画 画 廊 








图 1-8-12 背景 可 缩放 矢量 图 形 在 浏览 器 中 的 效果 图 
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实 训 9 JavaScript 基础 应 用 





【 实 训 目标 】 

(1) 理解 JavaScript 脚本 放置 与 运行 的 方法 。 
(2) 掌握 JavaScript 基本 构成 和 基础 语法 。 
(3) 掌握 自 定义 函数 定义 与 引用 。 

【 实 训 内 容 】 

(1) JavaScript 放置 与 运行 。 

(2) JavaScript 变量 ,标识 符 、 表 达 式 定义 与 使 用 。 
(3) 自 定义 函数 编写 与 调用 。 

(4) 消息 对 话 框 函数 应 用 。 

(5) 事件 调用 与 简约 化 调用 。 

(6) 样式 表 定义 与 使 用 。 

(7) 表单 、 表 单 控件 的 使 用 。 

【 实 训 项 目 】 

(1) 改变 新 闻 网 页 中 的 字号 。 

(2) 计算 任意 区 间 内 连续 自然 数 的 累加 和 。 
(3) 消息 对 话 框 的 使 用 。 


项 目 26 改变 新 闻 网 页 中 的 字号 


1. 实 训 要 求 


很 多 网 站 的 新 闻 版 块 均 设 有 个 性 化 的 “选择 字号 【大 中 小 链接 的 功能 ,主要 是 给 不 同 
的 网 络 访问 者 带 来 视觉 上 的 方便 。 例 如 江苏 省 人 民政 府 网 站 的 首页 下 的 “江苏 要 闻 ”, 选 择 
某 一 新 闻 , 打 开 页 面 ,如 图 1-9-1 所 示 。 
根据 “江苏 省 人 民政 府 网 站 ”中 的 这 一 个 性 化 的 功能 设计 如 图 1-9-2 所 示 的 界面 ,要 求 
当 网 络 访问 者 选择 字号 中 的 [大 中、 小 时 能 实现 页 面 字 号 大 小 变化 ,选择 “中 ”时 ,页 面 效果 
如 图 1-9-3 所 示 。 


2. 实 训 内 容 

(1) 图 层 的 创建 与 应 用 。 

(2) 内 部 样式 表 的 定义 及 应 用 。 
(3) 自 定义 函数 的 定义 与 应 用 。 
(4) 超 链接 的 定义 与 应 用 。 


Web 讲 问 开发 技术 实验 与 实践 一 一 有 TML5、CSS3、JavaScript( 第 3 版 ) 








€ > © [© wwwjiangsu.gov.cn/jsyw/201708/t20170805 4 申 0664 
A i 


和 江苏 省 人 RR 下 府 | .本 SP 


Govemment of Jangsu Province 











生态 文明 建设 目标 评价 考核 实施 办 法 出 炉 一 年 一 评价 
五 年 一 考核 热点 推荐 


发 布 时 间 ;2017-06-05 来源 :新 华 日 握 ” 选 拜 字号: [ 太 中 小 ] 打 HI 本 页 添加 疏 若 ， 字 3 在 第 六 期 县 委 书 记 工 作 讲 坛 上 强调 名 
理 促进 和 i 英 稳 定 为 十 九 大 召开 创造 良好 : 
隆 主持 Bol7- 

， 第 五 届 中 国 一 中 亚 合作 论坛 在 连云港 举行 
谋 开 幕 式 并 玫 套 Po17- 

“38 在 全 省 高 校 笑 导 干部 署 期 字 习 培训 中 - 
力 培养 适应 时 代 要 求 的 优秀 人 才 [2017- 

， 吴 于 隆 在 连 云 洪 调 研 8 所 2 调 坚持 安全 发 展 

[oI 

* 庆祝 建 军 90 局 年 军政 座谈 会 在 宁 举行 网 记 

共 课 发 展 大 计 刘 粤 军 郑 卫 平 李 温 呈 政 隆 等 





省 委 办 公 厅 、 省 政府 办 公 厅 日 前 印发 《江苏 省 生态 文明 建设 目标 评价 考核 实施 办 法 》 

(以 下 简称 < 办 法 >》) ， 明 确 所 出 对 各 设 区 市 党 委 、 政 府 生态 文明 建设 目标 实行 年 度 评价 、 
五 年 考核 机 制 ， 考 核 结果 向 社会 公布 ， 并 作为 各 市 党 政 领导 班子 和 领导 干部 综合 考核 评价、 
干部 近 生 任免 的 重要 信 据 


《< 办法》 明确， 江苏 生态 文明 建设 目标 评价 考核 实行 党 政 同 责 ， 设 区 市 党 委 和 政府 领导 

成 员 生 志文 明 建 设 一 向 双 责 ， 按 客观 公正 、 科 学 规范 、 突 出 重点 、 注 重 实效 、 奖 惩 并 举 的 原 

则 进行 ， 采 取 评 价 和 考核 相 结合 方式 。 评价 方面 ， 重 点 评 信 各 设 区 市 上 一 年 度 生态 文明 建设 
进展 总 体 | 情况， 引导 各 地 攻 实 生态 文明 建设 相关 要 求 ， 每 年 开展 1 次 ， 在 8 月 底 前 完成 ， 评 价 ey 

结果 向 社会 公布 ， 并 纳入 生态 文 明 建 设 目标 考核。 考核 方面 ， 主 要 考查 各 设 区 市 生态 文明 建 ea veauwan zw AURa 

| = ,加 | 





图 1-9-1 江苏 省 人 民政 府 网 站 
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1-9-2 单 击 前 初始 状态 的 页 面 
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1-9-3 单 击 “ 中 ”链接 后 的 页 面 


3. 实 训 所 需 知识 点 
(1) 图 层 div 标记 


<div id= "content"></div> 


(2) 样式 style 标记 
< style type = "text/css"> 
#divl{text - align:center;font - size:12px;} 
#content{font - size:12px; line - height:2em;background: # 000099; 
padding:10px;color:white; border:2px groove #0000cc;} 
p{text - indent:2em;} 
</style> 


(3) 脚本 script 标记 
<head> 


< script type = "text/javascript" src = "外 部 js">…</script> 
</head> 


(4) 超 链接 a 标记 


<a href = "javascript: setFont( '12px')"> 小 </a> 
<a href ="#" onclick = "setFont('12px')"> 小 </a> 


(5) 标题 字 h3 标记 
<h3 align = "center"> 用 JavaScript 代码 改变 网 页 字体 大 小 </h3 > 


4. JavaScript 脚本 的 放置 与 函数 
。 在 head 标记 中 : 
<head> 


< script type = "text/javascript">…</script> 
</head> 


如 果 脚 本 放 在 head 标记 中 ,script 标记 中 脚本 代码 必须 定义 成 函数 形式 ,格式 如 下 : 
function functionname( 参 数 1, 参数 2, … ,参数 n){ 函数 体 } 

"在 body 标记 中 : 

<body> 


< script type = "text/javascript">…</script> 
</body> 


如 果 脚 本 放 在 body 标记 中 ,script 标记 中 脚本 代码 既 可 以 是 函数 ,也 可 以 是 代码 段 。 
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但 在 body 标记 中 可 以 调用 已 经 定义 过 的 脚本 函数 ,调用 方式 可 以 是 事件 调用 ,也 可 以 是 简 
约 化 调用 ,还 可 以 是 动态 调用 。 

。 JavaScript 自 定 义 函 数 结构 : 

格式 : function 函数 名 (参数 1 ,参数 2,… ,参数 n){ 柄 数 体 } 


function setFont(size){ 
/* 定 义 设置 字体 大 小 函数 * / 
//size: 大 小 ,单位 px 
var obj = document. getElementById("content"); // 根 据 id 获取 文档 对 象 
obj. style. fontSize = size; // 设 置 对 象 的 字体 大 小 
obj. style. color = "#ff0000"; // 设 置 对 象 的 颜色 

有 


。 超 链接 中 调用 JavaScript: 


<a href = "javascript: setFont( '12px')"> 小 </a> // 简 约 化 调用 
<a href ="#" onclick = "javascript:setFont('18px');"> 中 </a> // 事 件 调用 
<a href = "javascript: setFont( '24px');"> 大 </a> // 简 约 化 调用 


5. 实 训 过 程 与 指导 

编程 实现 “改变 新 闻 网 页 中 的 字号 ”页面 。 具 体 步 骤 如 下 : 

(1) 文档 结构 的 创建 

@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程序 名 称 为 prj_9_1. html, 格 式 如 下 : 


< == prio Tbenl 二 一 > 


@ 保存 文件 。 输 入 文件 名 为 prj_9_1. html, 选 择 编码 类 型 为 UTF-8, 然 后 保存 文件 。 

(2) 页 面 内 容 设计 

在 body 标记 中 插入 1 个 h2.2 个 div.1 个 p 标 记 和 3 个 超 链接 。 

外 在 body 中 插入 1 个 h2, 内 容 为 "用 JavaScript 改变 新 闻 网 页 中 的 字号 ”, 标 题 居 中 。 

@) 在 body 中 插入 div, 定 义 id 为 divl,div 中 的 内 容 为 “选择 字号 【小 中 大 防 ,分别 给 
“小 关中 交大 ?设置 超 链接 ,并 给 超 链接 设置 href ,onclick 等 属性 ,完成 自 定义 函数 的 调用 ， 
超 链接 的 格式 如 下 所 示 : 


<a href = "javascript: setFont( '12px')"> 小 </a> 
<a href ="#" onclick = "javascript:setFont('18px');"> 中 </a> 
<a href ="#" onclick = "setFont('24px');"> 大 </a> 


@ 在 body 中 插入 第 2 个 div, 定 义 图 层 的 id 为 content, 并 在 div 中 插入 1 个 p 标 记 。 
Pp 标记 的 内 容 如 下 : 
JavaScript 是 一 种 能 让 我 们 的 网 页 更 加 生动 活泼 的 程序 语言 ,也 是 目前 网 页 设计 中 最 容易 学 又 最 方 


便 的 语言 。 我 们 利用 JavaScript 可 以 轻易 地 做 出 亲切 的 欢迎 讯息 、 漂 亮 的 数字 钟 有 广告 效果 的 跑马 灯 还 
可 以 显示 浏览 器 停留 的 时 间 , 这些 特 殊 效果 可 以 提高 网 页 的 可 观 性 。 


(3) 表现 设计 

在 style 标记 中 分 别 定义 图 层 、 段 落 的 样式 ,样式 定义 如 下 所 示 

Q@ 定义 第 1 个 div 样式 。# divl 样式 为 文本 居中 对 齐 、 字 体 大 小 16px。 

@ 定义 第 2 个 div 样式 。# content 样式 为 字体 大 小 12px. 行 高 2em、 填 充 10px\ 背 景 
颜色 # 井 COC0C0 、 颜 色 black ,边框 线 粗 细 2px、 线 型 groove、 线 颜色 #FCFF57。 

@ 定义 p 标 记 样式 。p 样式 为 首 行 缩 进 2 个 字符 。 

@ 保存 网 页 。 

(4) 自 定义 JavaScript 函数 

@ 在 head 标记 中 插入 script 标记 ,并 定义 $ (id) 函 数 。 该 函数 是 通过 对 象 的 id 号 获 
取 页 面 对 象 的 方法 ,代码 如 下 所 示 : 


function $ (id){return document. getElementById(id);} 


@ 在 head 标记 中 插入 script 标记 ,并 定义 setFont(size) 函 数 : 


// 定 义 设置 字体 大 小 函数 
function setFont(size){ 

$ ("content"). style. fontSize = size; // 调 用 $ (id) 函 数 ,调用 时 参数 必须 带 双 引号 
; 


注 : 在 DOM 中 style 对象 的 属性 与 CSS 样式 中 常用 的 属性 名 称 未 必 相 同 。HTML 


DOM Style 对 象 的 属性 有 背景 边框 、 边 距 、 布 局 列表、 杂项 定位、 打印、 滚动 条 、 表 格 、 文 
本 、 规 范 。 此 处 仅 列举 与 文本 相关 的 部 分 属性 ,如 表 1-9-1 所 示 。 
(5) 保存 并 查看 网 页 
完成 代码 设计 后 , 青 次 保存 网 页 文件 。 通 过 浏览 器 查看 页 面 ,效果 如 图 1-9-2 所 示 。 
Style 对 象 的 属性 可 通过 http://www. w3school. com. cn/htmldom/dom_obj_style. 
asp 网 页 查看 。 
表 1-9-1 Text 部 分 属性 表 
































属 性 描 述 属 性 描 述 

color 设置 文本 的 颜色 fontWeight 设置 字体 的 粗细 
font 在 一 行 设 置 所 有 的 字体 属性 letterSpacing 设置 字符 间距 
fontFamily 设置 元 素 的 字体 系列 lineHeight 设置 行 间 距 

fontSize 设置 元 素 的 字体 大 小 textAlign 排列 文本 

fontStyle 设置 元 素 的 字体 样式 textIndent 缩 紧 首 行 的 文本 
fontVariant 用 小 型 大 写字 母 字体 来 显示 文本 textTransform 对 文本 设置 大 写 效果 


项 目 27 计算 任意 区 间 内 连续 自然 数 的 累加 和 


1. 实 训 要求 
(1) 掌握 外 部 JavaScript 脚本 的 编程 方法 ,学 会 在 HTML 文档 中 引用 外 部 自 定义 函 


JavaScript 基础 应 用 
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数 , 完 成 计算 任意 区 间 内 连续 自然 数 的 累加 和 sum(n1,n2)、 显 示 累 加 和 show() 等 函数 的 定 
义 ,实现 页 面 布 局 如 图 1-9-4 所 示 。 















































1-9-4 计算 累加 和 页 面 效果 图 


(2) 学 会 使 用 Document 文档 对 象 模型 获取 HTML 页 面 元 素 的 方法 。 
2. 实 训 内 容 

(1) JavaScript 外 部 函数 的 定义 与 引用 。 

(2) 事件 调用 JavaScript 函数 。 

(3) 图 层 的 定义 与 应 用 。 

(4) 内 部 样式 表 的 定义 与 应 用 。 

(5) 表单 与 表单 控件 的 定义 与 应 用 。 

3. 实 训 所 需 知识 点 

(1) 图 层 div 标记 


<div id= "divl" class=""></div> ”<! 一 用 于 放置 表单 --> 


(2) 样式 style 标记 


<style type= "text/css"> 
div{margin:0 auto; border:12px inset # ff0000; } /* 图 层 样式 */ 
form{ margin:0 auto; padding:10px; } /* 表单 样式 * / 
</style> 


(3) 表单 form 标记 


< form name = "" action="" method= "post"> 
< input type= "text" id = "start num" readonly> 
< input type= "button" onclick = "show();"> 
<input type= "reset" > 

</form> 


(4) 脚本 script 标记 
有 两 种 格式 : 分 别 使 用 type、language 属性 定义 。 


< script type = "text/javascript" src= "sum. js"></script> 
< script language = "javascript" src = "sum. js"></script> 


4. 实 训 过 程 与 指导 

编程 实现 “计算 任意 区 间 内 连续 自然 数 的 累加 和 ”页 面 ,具体 步骤 如 下 : 

(1) 文档 结构 的 创建 

@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程序 名 称 为 prj_9_2. html, 格 式 如 下 : 


w= pg 2 bl 一 一 过 


@ 保存 文件 。 输 入 文件 名 为 prj_9_2. html, 选 择 编码 类 型 为 UTF-8, 然 后 保存 文件 。 

(2) 页 面 内 容 设 计 

在 body 标记 中 插入 1 个 div、1 个 form 标记 、2 个 h3 和 若干 表单 控件 。 

@ 在 body 中 插入 1 个 div。 

@ 在 div 中 插入 h3 标记 ,h3 标记 的 内 容 为 “计算 任意 区 间 内 连续 自然 数 的 累加 和 ?”。 

@ 在 div 标记 中 搬入 form 标记 ,并 定义 form 的 method 和 action 属性 。 

@ 在 form 标记 中 插入 h3 标题 ,h3 标记 的 内 容 为 “定义 区 间 ”。 然 后 插入 3 个 label 标 
记 , 其 内 容 分 别 是 “起 始 数 “终止 数 “ 累 加 和 ”。 在 每 个 label 标记 后 分 别 插入 1 个 单行 文本 
输入 框 ,它们 的 id 属性 分 别 为 start_num、end_num、sum,name 属性 值 与 id 相同 ,累加 和 文 
本 框 设 置 只 读 属性 。 

@ 在 form 标记 中 插入 1 个 普通 按钮 ,设置 value 值 为 “计算 ”, 指 派 onclick 属性 值 为 
“show();”。 最 后 插入 1 个 重 置 按钮 ,设置 value 值 为 “清空 ”。 

@ 完成 上 述 代码 后 ,保存 网 页 ,并 通过 浏览 器 查看 页 面 ,效果 如 图 1-9-5 所 示 。 
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1-9-5 未 应 用 样式 时 的 页 面 效果 


(3) 表现 设计 
在 style 标记 中 定义 图 层 div 和 from 标记 的 样式 ,具体 样式 定义 要 求 如 下 : 
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Q@ div 标记 样式 为 文本 居中 对 齐 , 边 界 上 下 20px、\ 左 右 自 动 , 行 高 1.5 倍 ,边框 线 粗细 
18px、 线 型 groove、 线 颜色 #66FF66 ,宽度 560px, 高 度 260px, 字 体 标 粗 。 

@ 定义 form 标记 样式 。form 标记 样式 为 边界 上 下 20px、 左 右 自 动 , 填 充 5px。 

@ 完成 样式 定义 后 ,再 次 保存 网 页 ,查看 页 面 效果 如 图 1-9-4 所 示 。 

(4) 定义 外 部 JavaScript 函数 sum. js 

@ 在 head 标记 中 插入 script 标记 ,代码 如 下 所 示 : 


< script type = "text/javascript" src = "sum. js"></script> 


@ 编写 名 为 sum.js 的 外 部 JavaScript 程序 。 通 过 选择 “文件 "|* 新 建 >|* 其 他 ”命令 ， 
进入 选择 文件 类 型 对 话 框 ,如 图 1-9-6 所 示 。 选 择 JavaScript 后 , 单 击 OK 按钮 ,开始 
编辑 sum.js 文件。 保存 文件 时 将 编码 类 型 由 默认 “ANSI” 改 为 “UTF-8”, 避 人 免 页 面 产生 
乱码 。 























1-9-6 选择 文件 类 型 对 话 框 界面 


a. 在 文件 首 行 插入 注释 语句 ,标明 程序 为 sum. js。 
b. 编写 通过 id 号 获取 页 面 元 素 的 通用 函数 $ (id) ,格式 如 下 所 示 : 


function $ (id){return document. getElementById(id);} 


c. 编写 计算 累加 和 的 函数 sum(nl,n2) ,其 中 nl 是 起 始 数 ,n2 是 终止 数 。 


function sum(nl,n2){ 
for (var i=nl,suml =0;i<=n2 ;i++) 
{ suml=suml+i;} // 执 行 累加 
return suml; // 返 回 计 算 结 果 
} 


d. 编写 回填 显示 累加 和 的 函数 show()。 该 函数 要 求 ,从 起 始 数 和 终止 数 文本 框 中 取 
出 数据 ,并 比较 大 小 ,满足 起 始 数 必须 小 于 终止 数 ,否则 要 求 重新 输入 ,同时 清空 两 个 文本 


框 , 起 始 数 文本 框 获得 焦点 ,并 通过 告警 消息 框 提示 错误 信息 。 若 输入 数据 正确 , 则 调用 
sum(nl1,n2) 函 数 完成 计算 ,并 回填 到 累加 和 文本 框 中 ,代码 如 下 所 示 : 


function show(){ 
var nl1 = parseFloat( $ ("start_num").value); // 从 文本 框 中 取 数 并 解析 为 浮 点 数 
Var n22 = parseFloat( $ ("end_num").value); // 从 文本 框 中 取 数 并 解析 为 浮 点 数 
if (nl1>0 gs n22>0) // 输 入 数据 必须 大 于 0 
{ 
if ( nl1>=n22) 
{alert(" 起 始 数 必须 小 于 终止 数 ,请 重 输 !"); 


$ ("start num").value=""; // 清 空 文本 域 
$ ("end num").value=""; // 清 空 文本 域 
} 
elsef // 回 填 累 加 和 文本 框 


$ ("sum").value = sum(n11,n22); 
' 
Jelse{ 
alert(" 请 输入 数据 !"); 
$ ("start_num"). focus(); // 文 本 域 获得 焦点 
} 


(5) 保存 并 查看 网 页 

@ 完成 代码 后 ,保存 网 页 文件 。 通 过 浏览 器 查看 页 面 ,效果 如 图 1-9-4 所 示 。 

@ 输入 数据 进行 验证 ,具体 步骤 如 下 : 

a. 若 用 户 没 有 输入 任意 数据 就 单 击 * 计 算 ” 按 钮 , 则 弹出 告警 消息 框 ,如 图 1-9-7 所 示 ， 
用 户 单 击 “ 确 定 ” 按 钮 后 ,将 光标 定位 在 起 始 数 文本 框 上 。 


| 此 网 页 显示 : 


请 输入 数据 ! 





[we | 


图 1-9-7 未 输入 区 间 数 据 时 页 面 的 效果 图 


b. 车 用 户 输入 的 起 始 数 大 于 或 等 于 终止 数 , 则 弹出 告警 消息 框 ,如 图 1-9-8 所 示 , 用 户 
单 击 “ 确 定 ” 按 钮 后 ,将 起 始 数 和 终止 数 文本 框 清空 ,方法 为 给 object. value 赋 空 字符 串 ,并 
将 光标 定位 在 起 始 数 文本 框 上 ,方法 为 object. focus() 。 

c. 若 用 户 输入 数据 符合 要 求 ( 起 始 数 和 终止 数 必 须 大 于 0, 且 起 始 数 必 须 小 于 终止 数 )， 
用 户 单 击 * 计 算 ? 按 钮 后 ,调用 函数 进行 计算 ,并 将 计算 结果 回填 到 累加 和 文本 框 中 ,如 
图 1-9-4 所 示 。 
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图 1-9-8 起 始 数 大 于 等 于 终止 数 时 页 面 的 效果 图 


项 目 28 消息 对 话 框 综合 应 用 


1. 实 训 要 求 

(1) 掌握 事件 调用 自 定义 函数 的 方法 。 

(2) 掌握 常见 的 消息 对 话 框 的 使 用 方法 。 

(3) 学 会 使 用 if()else() 分 支 结构 编 程 。 

(4) 学 会 使 用 域 标记 和 域 标题 标记 ,并 设置 域 标记 的 样式 。 
(5) 按照 图 1-9-9 一 图 1-9-12 所 示 的 效果 完成 代码 编写 。 
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图 1-9-9 程序 运行 初始 页 面 图 1-9-10 输入 姓名 后 的 页 面 











127.0.0.1:8020 显示 : 
你 的 姓名 是 : 王 大 力 








图 1-9-11 提示 信息 框 页 面 图 1-9-12 告警 消息 对 话 框 页 面 


2. 实 训 内 容 

(1) JavaScript 自 定义 函数 的 编写 。 

(2) 学 会 使 用 事件 调用 JavaScript 函数 。 
(3) 域 和 域 标题 的 定义 与 应 用 。 

(4) 内 部 样式 表 的 定义 与 应 用 。 

(5) 表单 ,表单 控件 的 定义 与 设置 。 

3. 实 训 所 需 知 识 点 

(1) 样式 style 标记 


< style type = "text/css"> 
fieldset{ background: # 99ff99; border:8px ridge #3333cc; } 
legend{color: #0000cc;} 
form{ margin:20px; padding:20px; } 

</style> 


(2) 表单 form 标记 


< form method = "post" action=""> 
< input type= "text" name= "" id= "namel" maxlength= "10" readonly> 
< input type = "button" value = "输入 姓名 " onclick = "inputName( ) ;"> 
< input type = "reset" name = "clear" value = "清空 "> 

</form> 


(3) 脚本 script 标记 
< script type = "text/javascript"> 


function inputName( ){} 
</script > 


(4) 域 标记 和 域 标题 标记 


<fieldset> Es 
< legend align = "center"> 消 息 框 函 数 </legend> 2 
</fieldset > 耻 
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4. 实 训 过 程 与 指导 

编程 实现 “消息 对 话 框 综合 应 用 ”页 面 ,具体 步骤 如 下 : 

(1) 文档 结构 的 创建 

@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 语句, 注 明 程序 名 称 为 prj_9_3. html, 格 式 如 下 : 


prj 3 btnl > 


@ 保存 文件 。 输 入 文件 名 为 prj_9_3. html, 选 择 编码 类 型 为 UTF-8, 然 后 保存 文件 。 

(2) 页 面 内 容 设 计 

在 body 标记 中 插入 域 和 域 标题 标记 ,并 在 其 中 插入 表单 及 表单 控件 。 

@ 在 body 中 插入 1 个 域 和 域 标题 标记 ,设置 域 标题 居中 对 齐 , 域 标题 内 容 为 “消息 对 
话 框 综合 应 用 ”。 

@ 在 域 标记 中 插入 表单 .并 在 表单 中 插入 下 列表 单 控件 。 具 体 步 又 如 下 : 

a. 在 “你 的 姓名 ”后 面 插入 1 个 文本 输入 框 ,设置 id 属性 为 namel, 最 大 长 度 为 10, 文 
本 框 只 读 。 

b. 插入 1 个 普通 按钮 ,设置 value 属性 为 “输入 姓名 ”, 指 派 onclick 属性 为 inputName() 。 

c. 插入 1 个 重 置 按钮 ,设置 value 属性 为 “清空 ”。 

(3) 表现 设计 

在 style 标记 中 定义 图 层 div 和 from 标记 的 样式 ,具体 样式 定义 要 求 如 下 : 

@ 定义 fieldset 标记 样式 。fieldset 标记 样式 为 背景 颜色 # 99FF99 ,宽度 300px, 高 度 
150px, 边 框 粗细 8px、 线 型 ridge、 线 颜色 #3333CC ,边界 上 下 10px\ 左 右 自动 。 

@ 定义 legend 样式 。legend 样式 为 颜色 并 0000CC 。 

@ 定义 form 标记 样式 。form 标记 样式 为 边界 20px、 填 充 20px。 

@ 完成 样式 定义 后 ,再 次 保存 网 页 ,查看 页 面 效果 如 图 1-9-9 所 示 。 

(4) 定义 JavaScript 函数 

@ 在 head 标记 中 插入 script 标记 ,代码 如 下 所 示 : 


< script type = "text/javascript"srt:"" ></script > 
@ 编写 $ (id) .inputName() : 


function $ (id){return document. getElementById(id);} 


function inputName( ){ /* 定义 输入 姓名 函数 * / 
var name = prompt(" 输 入 你 的 姓名 :", "你 好 !"); 
证 (name!= null) // 判 断 输入 姓名 是 否 为 空 


{alert(" 你 的 姓名 是 : "+ name); 
$ ("namel").value = name; // 将 name 值 赋 给 id 为 "namel" 的 文本 框 
jelsef 
alert(" 请 你 输入 姓名 ! "); 


(5) 保存 并 查看 网 页 
完成 代码 设计 后 ,再 次 保存 网 页 文件 ,通过 浏览 器 验证 程序 的 正确 性 。 


课外 拓展 训练 9 


1. 编写 JavaScript 程序 实现 “ 求 100 以 内 的 素数 ”, 如 图 1-9-13 所 示 ,要 求 如 下 : 

(1) 页 面 标题 “ 求 100 以 内 的 素数 ”。 

(2) 页 面 内 容 *100 以 内 的 素数 有 : ”。 

(3) 使 用 循环 结构 逐一 判断 每 一 个 数 ,是 素数 则 输出 ,不 是 素数 则 跳 过 ,并 累计 100 以 
内 有 多 少 个 素数 。 

(4) 程序 名 称 为 project_9_1. html。 





所 仿 CG | 2700 工 8020/ 清 华 社 -规划 教材 -实验 教材 第 3.、 @@ 食 | 








100 以 内 的 素数 有 : 
23 57 11 13 17 19 23 29 31 37 41 43 47 53 59 61 67 71 73 79 83 89 97 
素数 有 25 个 








图 1-9-13 求 100 以 内 的 素数 
2. 编写 JavaScript 程序 实现 简易 密码 验证 ,如 图 1-9-14 和 图 1-9-15 所 示 ,要求 如 下 : 








127.0.0.1:8020 显示 : 

















(a) (b) 
1-9-14 输入 密码 长 度 少 于 8 个 字符 时 的 验证 界面 
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简易 密码 验证 127.0.0.1:8020 显示 : 
密码 中 必须 包 合 一 个 以 上 字母 !. 请 重 输 ! 
: 张 试验 
OO 
重 本 
四 四 的 
图 1-9-15 输入 密码 长 度 大 于 8 个 但 不 包含 字母 时 的 验证 界面 9 
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(1) 按 图 1-9-14 所 示 的 效果 完成 页 面 布局 设计 。 

(2) 定义 验证 密码 函数 checkKey(); 函数 的 功能 是 判断 密码 输入 框 输入 的 密码 长 度 是 
否 大 于 或 等 于 8 密码 字符 中 是 否 含 一 个 及 以 上 个 字母 ,车 不 符合 要 求 则 提示 告警 信息 分 别 
为 “密码 长 度 必 须 大 于 或 等 于 81, 请 重 输 !1”“ 密 码 中 必须 包含 一 个 以 上 字母 !, 请 重 输 !1”; 单 
击 告警 框 中 的 “确定 ?按钮 后 ,将 原 密码 框 内 容 清空 。 

(3) 程序 名 称 为 project_9_2. html。 








实 训 10 JavaScript 高 级 应 用 





【 实 训 目标 】 

(1) 掌握 JavaScript 分 支 结构 语法 ,并 学 会 使 用 分 支 结 构 编程 。 
(2) 掌握 JavaScript 循环 结构 语法 ,学 会 使 用 多 种 循环 编写 应 用 程序 。 
(3) 掌握 多 分 支 if…else if …else 结构 与 switch 结构 互 换 编程 。 
【 实 训 内 容 】 

(1) 用 分 支 结 构 实现 简易 代码 编程 。 

(2) 用 循环 结构 实现 简易 代码 编程 。 

(3) 用 两 种 多 分 支 结构 编写 相关 程序 。 

(4) 用 自 定义 函数 实现 相关 程序 功能 。 

(5) 使 用 DIV 十 CSS 综合 编程 。 

(6) 系统 常用 函数 的 应 用 。 

【 实 训 项 目 】 

(1) 成 绩 百 分 制 转换 为 五 级 制 。 

(2) 计算 之 N!。 

(3) 系统 常用 函数 的 使 用 。 


项 目 29 成 绩 百 分 制 转换 为 五 级 制 


1. 实 训 要 求 

将 百分制 成 绩 转换 成 “优秀 .良好 中等、 合格 .不 合格 ?五 个 等 级 。 要 求 能 够 使 用 多 分 支 
if…else 让 …else 和 switch 两 种 结构 编写 直接 执行 JavaScript 脚本 、 自 定义 判定 成 绩 等 级 的 
函数 等 两 种 方法 来 实现 程序 功能 ,程序 运行 页 面 如 图 1-10-1 一 图 1-10-3 所 示 。 

2. 实 训 内 容 

(1) 设置 图 层 的 属性 。 

(2) 熟悉 两 种 多 分 支 结构 。 

(3) 熟悉 JavaScript 脚本 编程 。 

(4) 定义 JavaScript 等 级 转换 函数 conversion(score) 。 

3. 实 训 所 需 知识 点 

(1) 图 层 div 标记 


<div id= "divl"></div> 
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课程 成 绩 评定 























课程 成 绩 评 定 


课程 成 缚 


企 1-- 成 里 等 级 为 优秀 





图 1-10-2 运行 中 页 面 图 1-10-3 束 后 页 面 


i 
; 
其 


(2) 样式 style 标记 
< style type = "text/css"> 


# divl{ background: #006600; color:white; width:300px; height:300px; } 
</style> 


(3) 脚本 script 标记 
< script type = "text/javascript" src ="# .js">…</script> 


4. 程序 结构 
(1) if 〇 {}else{}) 结 构 
。 单 分 支 结构 : 


证 (x>10) {alert(" 单 分 支 结构 "); } 
。 双 分 支 结构 : 


if (x>=10) {alert("x 大 于 或 等 于 10")}else {alert("x 小 于 10"); }; 


。 多 分 支 结构 : 


证 (x>=90){alert();} 
else if (x>=80) { alert();} 
else if (x>=70) { alert();} 


else { alert();} 
(2) switch 结构 


switch (level) { /x* level 是 变量 * / 
case 1:{result = "优秀 ";break;}  ”/* 每 一 case 语 句 均 必须 以 break; 结束 * / 
case 2:{result = "良好 ";break;} 
case 3:{result = "中 等 ";break;} 
case 4:{result = "合格 ";break;} 
default:{result = "不 及 格 ";} /* 最 后 一 个 为 缺 省 default x / 
4 


5. JavaScript 自 定义 函数 结构 
自 定义 函数 格式 : function 函数 名 (参数 1 ,参数 2,… ,参数 n) {函数 体 }。 


function conversion( score){ 


函数 体 ， 
return 参数 ; 
//return ; 

3 

6. 编程 要 求 


(1) 采用 让 O 〇 {) else if Oelse{) 结 构 和 脚本 直接 编程 。 要求 利用 提示 对 话 框 函数 输入 
成 绩 , 并 将 评定 等 级 保存 在 变量 result 中 ,最 后 输出 到 页 面 上 。 


< script type = "text/javascript"> 
// 五 级 制 成 绩 表示 法 
// 采 用 分 支 嵌 套 结构 
document. write("< strong > 课程 成 绩 评 定 </strong><br>< br>"); 
// 利 用 函数 输入 一 个 成 绩 


var result = ""; // 定 义 保存 评定 等 级 结果 的 变量 
var x= prompt(" 请 输入 你 的 成 绩 : ",0); // 利 用 提示 对 话 框 输入 成 绩 
if (x!= null) 


{ ”document.write(" 课 程 成 绩 为 :" +x+ "分 "); 
if (x>=90){ result = "优秀 "; alert("1l-- 成 绩 等 级 为 "+ result); } 
else if (x>=80){ result = "良好 "; alert("2-- 成 绩 等 级 为 " + result); } 
else if (x>=70){ result = "中 等 "; alert("3 -- 成 绩 等 级 为 " + result); } 
else if (x>= 60){ result = "合格 "; alert("4-- 成 绩 等 级 为 " + result); } 
else{ result = "不 及 格 "; alert("5 -- 成 绩 等 级 为 " + result); } 


} 

else{ alert(" 请 重新 输入 成 绩 !"); } 

document. write("< br > 成 绩 等 级 为 :" + result); ”// 最 后 输出 评定 等 级 和 
</script > 
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(2) 采用 switch 结构 和 脚本 直接 编程 。 要 求 利用 提示 消息 框 输入 成 绩 ,将 成 绩 分 为 五 
个 等 级 分 别 对 应 “1- 优 秀 、2- 良 好 、3- 中 等 .4- 合 格 、5- 不 合格 ”, 用 数字 等 级 作为 case 常量 ,再 
根据 输入 成 绩 所 属 范围 转换 成 相应 的 等 级 ,保存 在 level 变量 中 ,然后 采用 switch 结构 编 
程 ,参照 上 例 代 码 将 结果 输出 到 页 面 上 。 


< script type = "text/javascript"> 
// 五 级 制 成 绩 表 示 法 
// 采 用 分 支 谋 套 结构 
document. write("< strong > 课程 成 绩 评定 </ strong ><br><br>"); 
var x= prompt(" 请 输入 你 的 成 绩 : ",0); // 利 用 函数 输入 一 个 成 绩 
if (x!= nul1) 
( 
document. write( "课程 成 绩 为 :" +x+ "分 "); 
var level = 0,result = ""; 
证 (x>=90){level = 1}; 
if (x<90 && x>= 80){level = 2}; 
if (x<80 && x>=70){level = 3}; 
if (x<70 && x>= 60){level = 4}; 
证 (x<60){level = 5}; 
switch (level) 


{ 
case 1:{result = "优秀 ";break;} 
case 2:{result = "良好 ";break;} 
case 3:{result = "中 等 ";break;} 
case 4: {result = "合格 ";break;} 
default:{result = "不 及 格 ";} 
} 
document. write("< br > 成 绩 等 级 为 :" + result); 
} 
elsef 
alert(" 请 重新 输入 成 绩 !"); 
} 
</script> 


(3) 采用 函数 编程 。 要求 编写 独立 的 成 绩 与 等 级 转换 函数 ,将 下 列 代码 放 惫 在 head 标 
记 中 ,在 body 标记 中 通过 conversion(score) 函 数 实现 调用 ,将 函数 值 赋 给 指定 的 变量 。 在 
函数 体内 可 以 使 用 两 种 多 分 支 结 构 编 程 ,if(){)else if()1)} 或 switch 多 分 支 结构 编程 。 


< script type = "text/javascript"> 
/x* 成 绩 与 等 级 转换 函数 
参数 : score, 表示 输入 成 绩 
返回 值 : result, 等 级 * / 

function conversion( score){ 
var result = "", level = 0; 
if (score>=90){level =1}; 
if (score<90 && score>= 80){level = 2}); 
if (score< 80 && score>=70){level = 3}; 
if (score<70 && score>=60){level = 4}; 


if (score<60){level = 5}; 
switch (level) 
{ 
case 1:{result = "优秀 ";break;} 
case 2:{result = "良好 ";break;} 
case 3:{result = "中 等 ";break;} 
case 4:{result = "合格 ";break;} 
default:{result = "不 及 格 ";} 
} 
return result; 

} 


</script > 


7. 实 训 过 程 与 指导 

编程 实现 成 绩 百分制 转 五 级 制 。 从 HTML 文档 的 创建 .内 容 设计 ,样式 定义 、 丢 本 编 
程 和 运行 调试 ,完成 程序 设计 任务 。 具 体 步 又 简 述 如 下 : 

(1) 创建 prj_10_1_1. html、prj_10_1_2. html、prj_10_1_3. html 等 多 文档 。 

(2) 在 head 标记 中 插入 内 部 样式 表 , 定 义 图 层 div 的 样式 。# divl 样式 为 宽度 300px、 
高 度 300px\ 背 景 颜色 #006600 边界 上 下 100px、 左 右 自动 颜色 白色 ,字体 大 小 24px、 边 框 
粗细 8px、 双 线 型 .颜色 #009933、 文 本 居中 对 齐 。 

(3) 在 head 标记 中 搬入 script 标记 ,在 script 标记 中 定义 conversion(score) 函 数 。 

(4) 参照 图 1-10-1 一 图 1-10-3 所 示 页 面 效果 ,在 body 标记 中 插入 div 和 script 等 相关 
元 素 。 
(5) 完成 相关 代码 编写 。 


项 目 30 计算 2N! 


1. 实 训 要 求 

(1) 掌握 for、while do…while ,for in 等 循环 语法 结构 。 

(2) 能 熟练 运行 多 种 循环 结构 解决 实际 工程 问题 。 

(3) 运用 for 循环 实现 计算 之 N1! ,页 面 效果 如 图 1-10-4 和 图 1-10-5 所 示 。 


x 
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图 1-10-4 计算 N! 的 初始 页 面 
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1-10-5 计算 忆 N! 的 结果 页 面 


2. 实 训 内 容 

(1) 内 部 样式 表 定 义 与 应 用 。 

(2) JavaScript 放置 与 运行 方式 。 

(3) 域 及 域 标题 定义 与 应 用 。 

(4) for 循环 结构 编程 应 用 。 

3. 实 训 所 需 知 识 点 

(1) 域 fieldset 标记 、 域 标题 legend 标记 


<fieldset > 


<legend> 计 算 1! +2! + … + NI</legend> 
</fieldset > 


(2) 样式 style 标记 


< style type = "text/css"> 
fieldset{ margin:20px auto; background: # 0033ff; color:white; 
width:300px; padding:0 40px; border:2px outset #009966; } 
legend{ font - size:28px; color:#99ffff; font— weight:bolder; } 
</style> 


(3) 脚本 script 标记 
有 以 下 两 种 格式 : 


< script type = "text/javascript" [src= "外 部 文件 名 称 . js"]></script> 
< script language = "javascript" [src = "外 部 文件 名 称 . js"]></script> 


4. 编程 要 求 
(1) 主 程序 为 prj_10_2_1. html。 
(2) 使 用 域 , 域 标题 标记 ,将 页 面 信息 进行 分 组 ,定义 fieldset legend 标记 样式 。 


(3) 掌握 JavaScript 脚本 的 放置 与 运行 方式 ,会 使 用 多 种 方式 进行 编程 ; 学 会 使 用 提示 
对 话 框 给 变量 赋值 ,并 对 变量 的 取 值 进行 判断 。 

(4) 利用 for 循环 、while、do…while 等 循环 结构 解决 实际 问题 ,并 进行 比较 ,总 结 一 下 
哪些 循环 结构 可 以 互 换 , 哪 些 不 可 以 互 换 ,不 断 积累 编程 经 验 。 


(5) 该 实验 仅 以 for 循环 为 例 编程 实现 计算 之 N!, 其 他 循环 结构 可 以 自行 参照 编写 。 
5. JavaScript 脚本 调用 
(1) 事件 调用 


< input id= "button" type = "button" value= "计算 DN!" onclick = "show();"> 


(2) 直接 调用 
将 脚本 放置 在 body 标记 中 直接 执行 : 


< script type = "text/javascript"> 
/* 这 是 直接 调用 JS* / 
document. write(" 这 是 直接 调用 JS") ; 


</script> 


6. 实 训 过 程 与 指导 

编程 实现 计算 之 N!。 从 HTML 文档 创建 .内 容 设计 、 样 式 定义 .脚本 编程 和 运行 调试 ， 
完成 程序 设计 任务 。 具 体 步 又 简 述 如 下 : 

(1) 创建 prj_10_2_1. html、prj_10_2_2. html 文档。 

(2) 在 HTML 文档 head 标记 中 分 别 插入 样式 style 标记 。 

(3) 在 style 标记 中 分 别 定义 域 样式 . 域 标题 样式 。 

(4) 分 别 在 head body 标记 中 插入 script 标记 ,并 编写 相应 的 JavaScript 代码 。 

(5) 在 body 标记 中 插入 域 域 标 题 标记 、 脚 本 等 标记 。 

(6) 利用 多 种 循环 编程 计算 之 N!, 也 可 以 编写 通用 自 定 义 函 数 计算 之 N! ,函数 名 为 
compute_sum(Cn) 。 

7. 拓展 与 提高 

(1) 采用 while 循环 实现 计算 之 N! ,程序 文件 名 为 prj_10_2_3. html。 

(2) 采用 do…while 循环 实现 计算 之 N1! ,程序 文件 名 为 prj_10_2_4. html。 

(3) 采用 自 定义 函数 编程 实现 计算 之 N! ,程序 文件 名 为 prj_10_2_5. html, 函 数 名 为 
compute_sumCn) 。 

(4) 采用 函数 编程 实现 计算 之 N1!。 

Q@ 页 面 布 局 要 求 。 采 用 表格 和 表单 布局 ,效果 如 图 1-10-6 所 示 , 其 中 表格 采用 4 行 4 
列 格局 ,定义 表格 table、td 和 input( 井 button) 的 样式 ,使 其 界面 达到 如 下 效果 ; 输入 整数 N 
的 值 后 , 单 击 “ 计 算 之 N1? 按 钮 后 ,将 计算 结果 回填 到 累加 和 文本 框 中 ; 单 击 “ 清 空 ”按钮 可 
以 将 页 面 上 的 所 有 文本 框 清空 。 具 体 样 式 定义 如 下 : 

table 样式 为 背景 颜色 并 F2F2F2、 宽 度 600px、 高 度 300px、 边 界 上 下 20px\ 左 右 自动 . 颜 
色白 色 ,边框 粗细 20px、 线 型 ridge、 线 颜色 # 井 9999cc。 

td 样式 为 字体 大 小 20px、 字 体 标 粗 ,文本 居中 对 齐 。 
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按钮 #button 样式 为 宽度 180px、 高 度 60px。 

@ 页 面 元 素 获 取 。 利 用 Document 对 象 模型 的 getElementById(id) 来 获取 HTML 页 
面 元 素 , 然后 通过 对 该 元 素 value 属性 获取 或 赋值 来 实现 页 面 文本 框 数据 的 读 取 和 重 置 。 
通过 id 获取 页 面 元 素 ( 对 象 ) 的 通用 函数 定义 如 下 : 


function $ (id){return document. getElementById(id);} // 通 过 id 获取 页 面 元 素 


@ 编写 外 部 js 文件。 文件 名 为 sum_factorial. js, 分 别 定义 $ (id)、compute_sum(n)、 
show() 等 函数 ,然后 通过 “计算 之 N!? 按 钮 的 onclick 事件 来 实现 js 函数 的 调用 。 


4 | 
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输入 整数 N 的 值 : 


ZN ! = [43954713 


| 


图 1-10-6 单 击 “ 计 算 沁 N!1” 按 钮 后 的 运行 结果 页 面 

















外 部 JavaScript 脚本 代码 如 下 所 示 : 


/* 功能: 计算 N! 

函数 名 : sum_factorial.js*/ 

// 采 用 for 循环 实现 

function $ (id){return document. getElementById(id);} 

function compute_sum(n){ 
var result = 1, sum= 0; // 定 义 保存 阶乘 累加 和 、N 阶乘 结果 的 变量 
for ( var i=1;i<=n;it+) 


{ 


result = result * i; // 计 算 并 的 阶乘 
Sum = Sum + result; // 计 算 累 加 到 i 阶乘 的 和 
} 
return sum; // 返 回 阶乘 累加 和 
} 
// 采 用 while 循环 实现 
function compute_sum_while(n){ 
var result= 1, sum= 0; // 定 义 保 存 阶乘 累加 和 X 阶乘 结果 的 变量 
var i=1 // 定 义 循环 变量 i 


while(i<=n) 


result = result * i; // 计 算 守 的 阶乘 
Sum = Sum + result; // 计 算 累 加 到 i 阶乘 的 和 
i=i+t1; // 等 价 于 i++, 控 制 循环 变量 语句 
| 
return sum; // 返 回 阶乘 累加 和 
// 显 示 累 加 和 的 函数 


function show(){ 
var n= parseFloat( $ ("n_text").value);  // 得 到 文本 框 的 值 并 转换 成 实数 


var sum = compute_sum(n); // 阶 乘 计算 累加 和 
$ ("sum text").value = sum; // 向 累加 和 文本 框 赋值 
return; // 结 束 函数 
项 目 31 系统 常用 函数 的 使 用 
1. 实 训 要 求 


(1) 掌握 常用 的 JavaScript 系统 内 部 函数 和 对 象 函数 的 语法 。 
(2) 验证 常用 函数 的 运行 结果 ,函数 验证 页 面 如 图 1-10-7 所 示 。 
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Javascript 常 用 函数 的 应 用 


| 工 计算 表达 式 的 结果 函数 eval(" 字 符 串 ”) 
1000+3/5=1000.6 x=10,y=20,x*y=200 
2+2=4 x=10,x+17=27 

2. 编 码 函 数 escape(" 字 符 串 ") 
escape(&)=%26 






| escape(my name is 张 华 )=%26nbsp%3B%26nbsp%3Bmy%20name%20is%20%u5F20%u534E 
| 3. 解 码 函数 unecspe(string) 
unescape('%26)=& 
| unescape(my%20name%20is%20%u5F20%u534E )= my name is 张 华 
4. 字符 型 转换 成 浮 点 数 函数 parseFloat(string) 
«parseFloat(3.14)=3.14 parseFloat(314e-2)=3.14 
| parseFloat(3.14ab’)=3.14 parseFloat( FF2)=NaN 
‘parseFloat( 345.25FF2)=345.25 
| 5. 字符 型 转换 成 整 型 函数 parseInt(numberstring,radix) 
| 32:32 
| 032:32 
Ox32:50 
， parseint(15*3 ,10)=15 
| 6. 判 断 是 否 是 NaN 函 数 isNaN0 
isNaN(5454g")=true 

isNaN("789")=false 
， 7. 保留 固定 小 数 点 位 数 的 函数 toFixed(n) 
356.25678.toFixed(2)=356.26 356.25.toFixed(3)=356.250 

8. 将 数值 转 为 不 同 进 制 的 字符 串 函数 toString(radix) 
64.toString0=64 64.toString(2)=1000000 64.toString(8)=100 

9. 单 个 字符 提取 函数 charAt(n) 
| ABCEDFG.charAt(1)=B ABCEDFG.charAt(5)=F ABCEDFG.charAt(10) 是 空 示 











图 1-10-7 系统 常用 函数 的 使 用 页 面 
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2. 实 训 内 容 

(1) 内 部 样式 表 定 义 与 应 用 。 
(2) 脚本 放置 与 编程 。 

(3) JavaScript 常用 函数 的 使 用 。 
3. 实 训 所 需 知 识 点 

(1) 样式 style 标记 


< style type = "text/css"> 
div{background: # 000099; color:white;width:700px; 
font - size:20px; font ~— weight:bolder; } 
h4{text - align:center;} 
bfcolor:redifont- size:18px; } 
</style> 


(2) 脚本 script 标记 


< script type = "text/javascript"> 
document, write("< br > gnbsp; gnbsp;2+2="+eval("2+2")); 
document. write("g&nbsp; gnbsp;" + "x=10,x+17="+eval(x+17)); 
</script > 


4. 页 面 设计 及 编程 要 求 

(1) 主 程序 为 prj_10_3. html。 利 用 Document 文档 对 象 模型 的 write 方法 输入 HTML 
流 信 息 , 方 法 是 document. write(" 信 息 ") ,程序 主要 功能 是 验证 eval() 、escape()、unescape()、 
parseFloat() .parseInt() ,isNaN() 等 全 局 函数 和 toFixed(Cn) ,toString() 、charAt(n) 等 对 象 
函数 。 

(2) 将 JavaScript 脚本 放置 在 body 标记 中 ,直接 运行 ,也 可 以 放置 在 head 标记 中 ,但 需 
要 编写 自 定义 验证 函数 ,此 处 省 略 代码 。 

5. 实 训 过 程 与 指导 

编程 验证 系统 常用 的 函数 。 从 HTML 文档 创建 .内 容 设 计 、 样 式 定义 、 和 脚本 编程 和 运 
行 调试 ,完成 程序 设计 任务 。 具 体 步骤 如 下 : 

(1) 建立 prj_10_3. html 文档 框架 。 

(2) 在 HTML 文档 head 标记 中 插入 样式 style 标记 。 

(3) 在 style 标记 中 分 别 定 义 div、b、h3 等 标记 的 样式 。 样 式 具体 定义 如 下 : 

div 标记 样式 为 边界 上 下 10px\ 左 右 自动 .填充 10px\ 背 景 颜色 # 66FFFF; 颜 色 
井 330000、 宽 度 800px、 字 体 大 小 20px、 字 体 粗 细 标 粗 。 

@ h3 标记 样式 为 文本 内 容 居 中 。 

@@b 标 记 样 式 为 颜色 红色 ,字体 大 小 18px。 

(4) 在 body 标记 中 插入 图 层 、 标 题字 、 和 脚本 标记 ,编程 进行 函数 验证 ,并 按 格式 输出 
结果 。 


课外 拓展 训练 10 


1. 编写 JavaScript 代码 , 找 出 符合 条 件 的 数 ,如 图 1-10-8 所 示 。 

(1) 页 面 标题 为 “ 找 出 符合 条 件 的 数 ”。 

(2) 页 面 内 容 : 3 号 标题 标记 显示 “ 找 出 100 一 999 能 够 被 11 和 7 同时 整除 的 整数 的 个 
数 及 累加 和 ”, 要 求 输出 区 间 内 累计 有 多 少 个 符合 条 件 的 整数 ,并 计算 符合 条 件 的 整数 的 累 
加 和 ,同时 输出 符合 条 件 的 整数 ,输出 格式 : 每 行 10 个 整数 。 

(3) 程序 名 称 为 project_10_1. html。 


口 找 册 符合 冬 件 的 数 是 了 
@ | @ 127.0.0.1.8020/ 清 华 社 -规划 教材 -六 验 教材 第 3 版 QQ 从 | : 











找 出 100~999 能 够 被 11 和 7 同时 整除 的 整数 的 个 数 及 累加 和 


区 间 中 符合 条 件 的 数 有 (输出 格式 : 10 个 1 行 ): 
154 231 308 385 462 539 616 693 770 847 
924 

区 间 中 符合 条 件 的 数 共有 11 个 

区 间 中 符合 条 件 的 数 的 累加 和 为 5929 








1-10-8 找 出 符合 条 件 的 数 


2. 编写 JavaScript 程序 实现 倒置 九 九 乘法 口 雇 表 ,如 图 1-10-9 所 示 。 要 求 如 下 : 

(1) 页 面 标题 “倒置 九 九 乘法 口诀 表 ”。 

(2) 页 面 内 容 : 3 号 标题 字 显 示 * 倒 置 九 九 乘法 口诀 表 ”; 采用 for 循环 实现 倒置 九 九 乘 
法 口诀 表 。 

(3) 程序 名 称 为 project_10_2. html。 





CC [wa 127.0.0.18020/ 清 华 社 - 规 划 教材 -实验 教材 笔 3 版 资源 … QQ 女 | :i 





倒置 九 九 乘法 口诀 表 


1*9=9 2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=81 
1*8=8 2*8=16 3*8=24 4*8=32 5*8=40 6*8=48 7*8=56 8*8=64 

1*7=7 2*7=14 3*7=21 4*7=28 5*7=35 6*7=42 7*7=49 

1*6=6 2*6=12 3*6=18 4*6=24 5*6=30 6*6=36 

1*5=: 10 3*5=15 4*5=20 5*5=25 

1*4=4 2*4=8 3*4=12 4*4=16 

1*3=3 2*3=6 3*3=9 

1*2=2 2*2=4 

1*1=1 











图 1-10-9 倒置 九 九 乘法 口诀 表 
实 
yll 
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实 训 11 JavaScript 事件 分 析 





【 实 训 目标 】 

(1) 掌握 事件 事件 源 ,事件 句 柄 、 事 件 处 理 程序 的 概念 ,理解 它们 之 间 的 关系 。 
(2) 学 会 指定 事件 处 理 程序 的 方法 。 

(3) 学 会 编写 简单 的 事件 处 理 程序 。 

【 实 训 内 容 】 

(1) 表格 与 表单 混合 布局 。 

(2) 外 部 JavaScript 程序 编写 与 引用 。 

(3) Document 文档 对 象 获取 及 对 象 属性 设置 与 获取 。 

(4) 鼠标 单 击 、 双 击 事件 ,移出 \ 移 动 、 悬 停 等 事件 处 理 程 序 的 编写 。 
(5) 表单 控件 输入 内 容 提 取 与 有 效 性 检查 。 

(6) 自 定义 函数 编写 。 

(7) 样式 表 定 义 与 应 用 。 

【 实 训 项 目 】 

(1) 设计 校园 办 公 系 统 注 册页 面 。 

(2) 鼠标 动作 捕获 与 响应 。 


项 目 32 设计 校园 办 公 系 统 认 证 页 面 


1. 实 训 要 求 

设计 一 个 校园 办 公 系 统 认证 页 面 ,在 用 户 输入 相关 数据 后 能 够 逐 项 进行 数据 合法 性 检 
查 。 当 发 现 错误 时 ,能 够 在 输入 项 的 右边 label 标记 内 用 红色 加 粗 方式 显示 错误 信息 ,页 面 
效果 如 图 1-11-1 所 示 。 

校园 办 公 系 统 身份 认证 过 程 中 需要 对 校园 卡号 ,口令 、 二 次 口令 .QQ/ 微 信号 进行 有 效 
性 检查 ,具体 要 求 如 下 : 

(1) 校园 卡号 : 首 字符 不 为 0、 长 度 必须 是 10 个 字符 、 全 为 数字 。 

(2) 口令 ,二 次 口令 : 两 次 口令 必须 相同 .长度 大 于 或 等 于 8 个 且 小 于 或 等 于 15 个 字 
符 、 不 能 为 空 。 

(3) QQ/ 微 信 : 不 能 为 空 。 

2. 实 训 内 容 

(1) 图 层 创建 与 属性 设置 。 

(2) 分 支 结 构 在 程序 中 的 运用 。 





C | @ 127.0.0.1-8020/ 清 华 社 -规划 数 材 - 详 验 教材 第 3 版 资源 及 代码 20170526/ 实 溃 11/ 实 训 11- 代 码 /pi Q 食 | 


























图 1-11-1 校园 办 公 系 统 认 证 页 面 


(3) JavaScript 自 定义 函数 的 编写 。 

(4) JavaScript 变量 声明 与 赋值 。 

(5) HTML 文档 对 象 的 获取 与 对 象 属性 的 获取 与 设置 。 
(6) 事件 处 理 程序 的 绑 定 。 

(7) 表格 与 表单 混合 布局 。 

3. 实 训 所 需 知识 点 

(1) 图 层 div 标记 


<div id= ""> </div> 
(2) 样式 style 标记 


< style type = "text/css"> 
div{margin:0 auto; background: # 00ff99 url("bg_id. jpg");} /* 定义 图 层 样式 */ 


table{border:2px double #530000cc; …; margin:0 auto;} /* 定义 表格 样式 x*/ 

#tdi{text -align:right; font size:20px; color: 间 6600ff; } /* 定 义 单元 格 */ 

label{color:red; font - weight:bold; } /* 定义 标签 样式 */ 
</style> 


(3) 脚本 script 标记 
< script type = "text/javascript" src = ""></script> 
(4) 表单 form 标记 


< form name = "myform" method= "post" action="" onsubmit = ""> 
< input type = "submit" value = "提交 "> 


中 
< input type = "reset" value = " 重 置 "> 天 
</form> 训 
| 
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(5) 表格 table 标记 


<table> 
< caption > 表单 验证 </caption > 
<tr> 
<td> gnbsp;</td>< td> gnbsp;</td>< td> gnbsp;</td> 
</tr> 
</table> 


4. JavaScript 自 定义 函数 


function $ (id){return document. getElementById(id);} // 通 过 id 获取 页 面 元 素 


function checkcardno( ){ // 检 查 卡 号 的 有 效 性 } 
function checkkey( ){ // 检 查 口令 的 有 效 性 } 
function checkkey2(){ // 检查 二 次 口令 的 有 效 性 } 
function checkqqwx(){ // 检 查 0Q/ 微 信 的 有 效 性 } 


5. 事件 处 理 句柄 与 事件 处 理 程序 的 绑 定 


< input type = "text" name = "username" onblur = "checkcardno( ); "> 

< input type = "password" name = "password" onblur = "checkkey();"> 

< input type = "password" name = "confirmpassword" onblur = "checkeky2();"> 
< input type = "text" name = "mail" onblur = "checkqqwx();"> 


onblur 是 失去 焦点 事件 句柄 ,给 onblur 句柄 指定 事件 处 理 程序 。 
6. 实 训 过 程 与 指导 

编程 实现 校园 办 公 系 统 认证 页 面 ,具体 步骤 如 下 : 

(1) 文档 结构 的 创建 


@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 


页 ,在 首 行 插入 注释 语句 , 注 明 程序 名 称 为 prj_11_1. html。 格 式 如 下 : 


<! -- prj 11_1.html --> 


@ 保存 文件 。 输 入 文件 名 为 prj_11_1. html, 选 择 编码 类 型 为 UTF-8 ,然后 保存 文件 。 


(2) 页 面 内 容 设计 


在 body 标记 中 插入 div form ,table 标记 ,在 表格 中 插入 若干 表单 控件 ,完成 相关 标记 


属性 的 设置 。 
@ 在 body 中 插入 1 个 div, 用 于 插入 表单 和 表格 。 


@ 在 div 中 插入 1 个 form 标记 ,设置 表单 的 name 属性 为 myform, 其 余 默认 设置 。 
@ 在 form 中 插入 1 个 5 行 4 列 的 表格 ,如 图 1-11-5 所 示 。 插 入 内 容 具体 操作 如 下 ， 


a. 在 表格 第 1 行 第 1 列 跨 5 行 合 并 ,插入 图 像 文件 sfyz_2. jpg。 


b. 在 第 2 列 分 别 插入 相关 提示 信息 ,分 别 为 校园 卡号 ,口令 ,二 次 口令 .QQ/ 微 信 ， 


义 单元 格 的 id 属性 为 tdl 。 


并 


EE 


丰 


c. 定义 第 3 列 单元 格 的 id 属性 为 td2, 并 在 其 中 分 别 插入 单行 文本 输入 框 .2 个 密码 输 


入 框 . 单 行文 本 输入 框 , 设 置 它们 的 name 属性 分 别 为 cardno、key、key2、qqwx, 并 给 onblur 
属性 绑 定 事件 处 理 程 序 分 别 为 checkcardno() .checkkey() ,checkkey2() .checkqqwx() 。 

d. 在 第 4 列 单元 格 中 分 别 插入 4 个 空 label 标记 ,并 分 别 定义 id 属性 为 err_cardno、 
err_key err_key2 、err_qqwx。 

e. 第 5 行路 3 列 合并 为 1 个 单元 格 , 并 在 其 中 插入 提交 、 重 置 按钮 ,设置 它们 的 value 
属性 分 别 为 “提交 交 重 置 ”。 

@ 设计 完成 后 ,保存 网 页 ,查看 页 面 效果 如 图 1-11-2 所 示 。 











校园 办 公 系 统 认证 页 面 


校园 卡号 : 
口 令 : 

二 次 口令 : 
QQ/ 微 信 : 
Es| [Ea| 





























图 1-11-2 校园 办 公 系 统 认 证 页 面 初始 布局 


(3) 表现 设计 

在 style 标记 中 定义 图 层 div 和 form 标记 的 样式 ,具体 样式 定义 要 求 如 下 : 

@ 定义 div 标记 样式 。Div 样式 为 边界 上 下 0px\ 左 右 自 动 , 填 充 上 30px、 左 右 40px、 下 
30px, 背 景 颜 色 #00FF99 .背景 图 像 bgimages. jpg。 

@ 定义 table 样式 。table 样式 为 边框 2px、 双 线 型 . 边 颜 色 # 0000CC, 文 本 居中 对 齐 ， 
边界 上 下 0px\ 左 右 自动 。 

@ 定义 单元 格 样式 。 井 tdl 样式 为 文本 居 右 对 齐 .字体 大 小 20px\ 颜 色 #6600FF。 

@ 定义 单元 格 样式 。 井 td2 样式 为 文本 居 左 对 齐 。 

@@ 定义 标签 标记 样式 。label 样式 为 颜色 红色 .字体 标 粗 。 

@ 定义 h3 标记 样式 。 标 记 h3 样式 为 背景 色 #0033ff、 宽 度 500px、 高 度 40px、 上 下 填 
充 8px\ 左 右 填 充 自动 .字体 大 小 28px、\ 文 本 居中 显示 、 字 体 隶 书 颜色 白色 。 


div{margin:0 auto; padding:30px 40px 50px;background: #00ff99 url("bg_id. jpg");} 

table{ border:2px double # 0000ff; text - align:center;margin:0 auto;} 

#tdi{text — align:right; font — size:20px;color: #6600ff;} 

#td2{text — align:left;} 

label{color:red; font - weight :bold;} 

h3{background: # 0033ff; width: 500px; height: 40px; padding: 8px auto; font — size: 28px; text 一 
align:center;font - family: 隶 书 ;color: #FFFFFF;} 

input{height :24px;} 


(4) 定义 JavaScript 函数 
在 head 标记 中 插入 script 标记 ,在 script 标记 中 分 别 定义 获取 HTML 页 面 上 的 对 象 11 
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$ (id)、 检 查 卡 号 有 效 性 checkcardno()、 检 查 口令 有 效 性 checkkey()、 检 查 二 次 口令 有 效 性 
checkkey2() 、 检 查 QQ/ 微 信 有 效 性 checkqqwx() 等 函数 。 

分 别 对 卡号 .口令 .二 次 口令 .QQ/ 微 信 的 有 效 性 进行 检查 ,检查 规则 如 实 训 要 求 ,所 有 
文本 框 在 失去 焦点 时 触发 事件 ,并 执行 事件 处 理 程 序 , 对 相关 数据 进行 有 效 性 检查 ,并 将 错 
误 信息 通过 文本 框 右边 的 标签 和 告警 消息 框 显 示 。 

利用 标签 label 标记 显示 错误 信息 方法 。 通 过 Document 的 getElementById(“ID7”) 方 
法 获取 指定 的 ID 的 元 素 , 然 后 利用 元 素 的 innerHTML 属性 设置 或 返回 指定 标记 的 内 容 ， 
其 中 HTML DOM innerHTML 属性 是 表示 设置 或 返回 从 开始 标记 到 结束 标记 之 间 的 所 有 
HTML 内 容 。 没 有 错误 就 不 显示 任何 信息 ,有 错误 就 显示 出 来 。 实 现代 码 如 下 所 示 

function $ (id){return document. getElementById(id)} // 调 用 时 参数 需要 加 引号 

$ ("err_cardno"). innerHTML = ""; // 文 本 框 获 得 焦点 时 清空 原来 label 标记 间 的 错误 信息 

$ ("err_cardno"). innerHTML = "用 户 名 不 能 空 !"; // 有 错时 直接 在 标签 内 显示 错误 信息 


@O 获取 HTML 页 面 上 的 对 象 $ (id) 。 


function $ (id){return document. getElementById(id) ;} // 调 用 时 参数 需要 加 引号 
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1-11-3 卡号 有 效 性 检查 页 面 


function checkcardno(){ // 检 查 卡 号 的 有 效 性 
Var cno = myform. cardno. value; 
$ ("err cardno"). innerHTML = ""; 
证 (cno=="" || cno==null ){ // 为 空 或 不 输入 时 
$ ("err_cardno"). innerHTML = "卡号 不 能 为 空 ! "7 
Jelse if(cno. length!= 10){ 
$ ("err_cardno"). innerHTML = "卡号 长 度 必 须 为 10!1"; 
}else{ 
var firstnum = cno. charAt(0); 
if (firstnum== "0") // 首 字符 不 能 为 0 
{ $ ("err_cardno"). innerHTML = "卡号 首 字母 必须 不 为 0!1"; 
}else if (parse Int(cno). to String(). length!= 10) 
$ ("err_cardno"). innerHTML = "卡号 不 全 为 数字 !"; 
alert(" 卡 号 不 全 为 数字 !"); 


} 
} 


@ 检查 口令 有 效 性 checkkey() ,检查 出 错 信 息 如 图 1-11-4 所 示 。 


function checkkey( ){ // 不 能 为 空 
Var keyl = myform.key. value; // 存 放 口令 
$ ("err key"). innerHTML = ""; 
证 (keyl =="" || keyl == null1) // 口 令 为 空 
{ // 直 接 在 输入 框 右边 显示 错误 信息 
$ ("err_key"). innerHTML = "口令 不 能 为 空 !"; 
}else{ 


if (keyl.length<8 || keyl.length>15) ”// 检 查 口令 长 度 
{ 
$ ("err_key"). innerHTML = "口令 长 度 不 能 小 于 8 或 大 于 15!";} 


个 校 加 办 公 系 统 认证 页面 x S = 
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校园 办 公 系 统 认证 页 面 


: |1234567890 


| 口 s 与 三 次 口令 不 相同 1 











| 各 交 | | 二 各 | 
图 1-11-4 口令 有 效 性 检查 页 面 Ml 
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@ 检查 确认 密码 有 效 性 checkkey2() ,检查 出 错 信息 如 图 1-11-5 所 示 。 


function checkkey2(){ 
var key21 = myform. key2. value; 
var key11 = myform. key. value; // 存 放 口 令 
$ ("err key2"). innerHTML = ""; 
if (key21 =="" || key21 == nul1) // 口 令 为 空 


{ // 直 接 在 输入 框 右边 显示 错误 信息 
$ ("err_key2"). innerHTML = "口令 不 能 为 空 !"; 
jelse if (key21. length<8 || key21. length>15) ”// 检 查 口 令 长 度 
{ 
$ ("err_key2").innerHTML = "口令 长 度 不 能 小 于 8 或 大 于 15!"; 
Jelse 证 (key21!= keyl1) 
{ $ ("err_key2"). innerHTML = "口令 与 二 次 口令 不 相同 !"; } 
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2010091211 
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1-11-5 二 次 口令 有 效 性 检查 页 面 
@ 检查 QQ/ 微 信 有 效 性 checkqqwx() 等 函数 ,检查 出 错 信 息 如 图 1-11-6 所 示 。 


function checkqqwx(){ 
Var qqwx]l = myform. qqwx. value; 
$ ("err_qqwx"). innerHIML = ""; 
证 (qqwxl == null| |qqwx1 =="") 


// 存 放 0Q/ 微 信 


{ $ ("err_qqwx"). innerHTML = ”QQ/ 微 信号 不 能 为 空 !"; } 


} 


EEC 


校园 办 人 系统 认证 页 面 








1234567889 
































1-11-6 QQ/ 微 信 有 效 性 检查 图 


(5) 保存 并 查看 网 页 


完成 代码 设计 后 ,保存 网 页 文件 ,通过 浏览 器 查看 认证 检查 的 效果 。 


项 目 33 鼠标 动作 捕获 与 响应 


1. 实 训 要 求 


(1) 理解 鼠标 事件 类 型 .事件 句柄 事件 处 理 程序 的 关系 。 


(2) 学 会 运用 JavaScript 脚本 编写 自 定义 函数 实现 相关 功能 。 





(3) 通过 事件 处 理 程序 改变 图 层 的 背景 颜色 和 动态 切换 img 标记 中 的 图 像 ,页 面 效 果 


如 图 1-11-7 一 图 1-11-10 所 示 。 





口 筷 标 动作 捕获 与 响应 
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图 1-11-7 初始 与 鼠标 移出 后 的 页 面 
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图 1-11-9 鼠标 单 击 后 的 页 面 














1-11-10 鼠标 双击 后 的 页 面 


2. 实 训 内 容 

(1) 内 部 样式 表 定 义 与 应 用 。 

(2) JavaScript 放置 与 运行 方式 。 

(3) 事件 句柄 和 事件 处 理 程序 绑 定 的 方式 。 
(4) 表单 与 表单 控件 的 应 用 。 

(5) 页 面 对 象 的 属性 设置 与 获取 。 

3. 实 训 所 需 知 识 点 

(1) 表单 form 标记 


< form name = "forml" method= "post" action=""> 
< input type = "text" name="" id= "mtext"> 
</form> 


(2) 样式 style 标记 


< style type = "text/css"> 

form{ text ~ align:center; } 

div{ background: # 33ff99; width:400px; height:200px; margin:0 auto; } 
</style> 


(3) 脚本 script 标记 
< script type = "text/javascript"> 
function mover() { 


document. getElementById("mybody"). style. background = " #99cc66";}; 
</script > 


(4) 标题 字 h3 标记 
<h3 align = "center"> 鼠 标 动作 捕获 与 响应 </h3> 


(5) 水 平分 隔 线 hr 标记 


<hr color = "red" size= "1"> 


4. 实 训 过 程 与 指导 

编程 实现 “鼠标 动作 捕获 与 响应 页面, 具体 步骤 如 下 : 

(1) 文档 结构 的 创建 

@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程序 名 称 为 prj_11_2. html, 格 式 如 下 : 


pl 


@ 保存 文件 。 输入 文件 名 为 pj_11_2. html, 选择 编码 类 型 为 UTF-8, 然 后 保存 | 实 


ll 
交 乔 。 11 
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(2) 页 面 内 容 设 计 

在 body 标记 中 插入 div、form、input、h3、hr 等 标记 ,完成 页 面 布局 设计 。 

O@ 在 body 中 插入 1 个 div, 设 置 id 属性 为 mybody, 分 别 给 onMouseOver、onMouseOut、 
onClick .onMouseDown .onDblClick 等 事件 句柄 绑 定 mover()、mout()、mclick()、mdown()、 
mdclick() 等 事件 处 理 程序 。 图 层 事件 句柄 与 事件 处 理 程序 绑 定 的 方法 如 下 所 示 : 


< div id = "mybody" onMouseOver = "mover( );”onMouseOut = "mout();" onMouseDown = "mdown();" 
onClick = "mclick();" onDblClick = "mdclick();" > 


@ 在 div 中 插入 h3 标记 ,内 容 为 “鼠标 动作 捕获 与 响应 ”, 设 置 对 齐 属性 为 居中 。 

@ 在 div 中 插入 hr 标记 ,设置 颜色 为 白色 、 大 小 为 1px。 

@ 在 div 中 插入 form 标记 ,设置 name 属性 为 forml, 其 他 为 默认 设置 。 

@ 在 form 标记 中 插入 单行 文本 输入 框 ,设置 id 为 mtext, 用 于 放置 鼠标 状态 信息 。 

@ 在 div 中 插入 img 标记 ,设置 src 为 image21.jpg',id 为 image, 宽 度 为 200px\ 高 度 为 
100px'title 为 图 区 ,用 于 动态 刷新 图 像 ,记录 不 同 状态 。 

(3) 表现 设计 

在 style 标记 中 分 别 定 义 图 层 、 表 单 及 h3 标记 样式 ,样式 定义 如 下 所 示 : 

@ 定义 form 标记 样式 。form 样式 为 文本 居中 对 齐 。 

@ 定义 div 标记 样式 。div 样式 为 宽度 400px, 高 度 200px, 边 界 上 下 30px、 左 右 自动 ， 
背景 颜色 #00CC99 。 

@ 定义 h3 标记 样式 。h3 样式 为 顶部 填充 10px。 

(4) 定义 JavaScript 函数 

在 head 标记 中 插入 script 标记 ,在 script 标记 中 分 别 定义 $ (id) .mover() .mout()、 
meclick() .mdown() .mdclick() 等 函数 。 

@ 获取 页 面 对 象 的 函数 $ (id) ,代码 如 下 所 示 : 


function $ (id){return document. getElementById(id);} 


@ 鼠标 盘旋 函数 mover() ,代码 如 下 所 示 : 


function mover( ){ // 鼠 标 盘旋 事件 处 理 程序 
$ ("mybody"). style. background = "#99CC66"; 
$ ("image"). src = "image22. jpg"; // 切 换 图 像 


} 


@ 鼠标 移出 函数 mout() ,代码 如 下 所 示 : 


function mout(){ // 鼠 标 移出 事件 处 理 程序 ,恢复 初始 状态 
$ ("mybody"). style. background = "#00CC99"; 
$ ("image"). src = "image21. jpg"; // 切 换 图 像 


@ 鼠标 按 下 函数 mdown() ,代码 如 下 所 示 : 


function mdown( ) {forml. mtext. value = " 按 下 鼠标 ";} 


@ 鼠标 单 击 函 数 mclick() ,代码 如 下 所 示 : 


function mclick() { // 鼠 标 单 击 事件 处 理 程序 
forml. mtext. value = " 单 击 鼠 标 "; 
$ ("mybody"). style. background = " # 00CCAA"; 
$ ("image"). src = "image23. jpg"; // 切 换 图 像 
} 


@ 鼠标 双击 函数 mdclick() ,代码 如 下 所 示 : 


function mdclick(){ // 鼠 标 双击 事件 处 理 程序 
forml. mtext. value = "双击 鼠标 "; 
$ ("image").src= "image24. jpg"; // 切 换 图 像 
$ ("mybody"). style. background = " # AACCFF"; 

上 

</script> 


(5) 保存 并 查看 网 页 
完成 代码 设计 后 ,再 次 保存 网 页 文件 。 通 过 浏览 器 查看 页 面 ,分 别 进 行 鼠 标 操作 ,查看 
图 层 背 景 颜色 和 图 层 中 img 标记 内 图 像 动 态 切换 的 效果 。 


课外 拓展 训练 11 


1. 编写 JavaScript 程序 实现 显示 用 户 账号 和 密码 ,如 图 1-11-11 所 示 。 要 求 如 下 : 
(1) 页 面 标题 “用 户 注册 ”; 按 图 1-11-11 所 示 的 效果 完成 页 面 设计 。 























127.0.0.1:8020 显示 : 

















1-11-11 用 户 注册 页 面 时 输入 账号 后 失去 焦点 时 的 页 面 效果 


(2) 定义 表单 .账号 文本 框 、 密 码 框 的 name 属性 , 供 编 程 时 调用 。 3 


训 
(3) 编写 displayName() ,displayAll() 函 数 ,分 别 实现 失去 焦点 时 通过 告警 框 提示 用 户 | 11 
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名 、 一 次 性 输出 用 户 名 、 密 码 和 用 户 类 型 ,如 图 1-11-12 所 示 。 
(4) 程序 名 称 为 project_11_1. html。 








































127.0.0.1:8020 显示 : 


账号 : admin 
密码 : 12345678 
用 户 关 型 : 学 生 
























1-11-12 提交 后 显示 用 户 所 有 信息 


2. 编写 JavaScript 程序 实现 学 号 合法 性 检查 ,如 图 1-11-13 和 图 1-11-14 所 示 。 要 求 
如 下 : 

(1) 3 号 标题 字 标 记 显 示 “ 检 查 学 号 的 合法 性 ”。 

(2) 编写 checkNo() 函 数 ,实现 学 号 合法 性 检查 。 检 查 内 容 : 学 号 必须 为 10 位 且 完 全 
是 数字 ; 如 果 不 符合 检查 规则 , 则 分 别提 示 错 误 信息 为 “学 号 长 度 不 足 10 位 ,请 重 输入 !” 
“学 号 必须 为 数字 字符 ,请 重 输 入 !1 “学 号 输入 正确 1”。 

(3) 程序 名 称 为 project_11_2. html。 



























































检查 学 号 的 合法 性 | 127.0.0.1:8020 旦 示 : 
局 学 号 长 度 不 足 10 位 ,请 重 纵 入 ! 
: [T7090123 1 
确定 
1-11-13 学 号 合法 性 检查 
127.0.0.1:8020 显示 : 4 127001.8020 号 示 : 和 
学 号 必须 为 数字 字符 ， 请 本 给 入 ! 」 “学 S 绽 入 正确 ! 
1 

确定 

















1-11-14 学 号 合法 性 检查 





实 训 12 DOM 与 BOM 应 用 案例 





【 实 训 目标 】 

(1) 理解 DOM 树 状 结构 和 节点 的 概念 ,学 会 利用 DOM 进行 简单 交互 式 编程 。 

(2) 了 解 BOM 结构 图 ,学 会 利用 window 对 象 进行 简单 交互 式 编程 。 

(3) 理解 JavaScript 的 对 象 类 型 ,掌握 Array、String、Date、Number、Math 等 对 象 的 常 
用 属性 和 方法 。 

【 实 训 内 容 】 

(1) 使 用 循环 结构 实现 机 选 多 注 福 利 彩 票 。 

(2) 使 用 JavaScript 常用 内 部 对 象 的 属性 和 方法 进行 编程 。 

(3) 使 用 DOM 创建 对 象 的 方法 新 建 HTML 页 面 元 素 , 并 获取 或 设置 页 面 元 素 的 
属性 。 

(4) 使 用 DOM 删除 对 象 的 方法 删除 HTML 页 面 元 素 。 

(5) 使 用 表单 中 的 列表 框 实现 简易 列表 编程 。 

(6) 使 用 表格 进行 简易 页 面 布局 。 

(7) 使 用 CSS 样式 表 对 页 面 元 素 进行 样式 定义 。 

【 实 训 项 目 】 

(1) 设计 简易 福彩 投注 程序 。 

(2) 设计 江苏 福彩 投注 站 彩票 投注 助手 。 


项 目 34 设计 简易 福彩 投注 程序 


1. 实 训 要 求 

设计 一 个 简易 福彩 投注 程序 ,页 面 如 图 1-12-1 所 示 , 功 能 要 求 如 下 : 

(1) 单 击 “ 投 注 ” 按 钮 ,在 左边 文本 框 中 产生 1 注 彩 票 号 码 。 

(2) 单 击 * 清 空 ?按钮 ,将 所 有 文本 框 内 容 清空 。 

(3) 福利 彩票 号 码 由 7 个 号 码 , 外 加 1 个 特别 号 , 共 8 个 号 码 组 成 ,号 码 范围 为 01 一 30 
的 任意 一 个 数 。 使 用 随机 数 产生 [01,30] 的 任意 一 个 整数 。 

(4) 学 会 使 用 ECMAScript 内 建 对 象 Math 的 random() floor() 等 方法 来 实现 随机 产 
生 8 个 01 一 30 随机 整数 ; 学 会 使 用 ECMAScript 本 地 对 象 Array 数组 的 join() length 等 
方法 与 属性 。 

(5) 学 会 给 HTML 标记 指定 事件 处 理 程序 。 

(6) 学 会 采用 图 层 与 表格 、 表 单 等 布局 技术 进行 简易 Web 应 用 程序 设计 。 
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简易 福彩 投注 程序 
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图 1-12-1 简易 福彩 投注 程序 页 面 


2. 实 训 内 容 

(1) JavaScript 自 定义 函数 的 定义 与 应 用 。 

(2) 多 种 事件 指定 方式 的 使 用 。 

(3) 图 层 的 创建 与 属性 的 设置 。 

(4) 循环 结构 和 循环 谋 套 结构 的 编程 。 

(5) JavaScript 对 象 的 属性 和 方法 的 实际 应 用 。 
3. 实 训 所 需 知识 点 

(1) 图 层 div 标记 


<div id= ""></div> 


(2) 样式 style 标记 


< style type = "text/css"> 
div{width:450px;height:260px;margin:0px auto; border:2px solid # ff3300; 
background:url("fc_logo. jpg") right top no - repeat;} 
h2{font — size:28px; text ~ align:center;} 
td{font - weight :bold;font ~ size:18px;} 
</style> 


(3) 脚本 script 标记 

< script type = "text/javascript" src="*.js"></script> 

(4) 表单 form 标记 

< form name = "myform" method= "post" action="" onsubmit = ""> 


< input type = "button" value = "投注 " onclick = "selectnumber( 'number3');"> 
</form> 


(5) 表格 table 标记 


<table> 
= 二 
<td> 
< input type = "button" value = "投注 " onclick = "selectnumber( 'number3');"> 
</td> … 
</tr> 
</table> 


4. 定义 JavaScript 函数 


function $ (id){return document. getElementById(id);} 
function selectnumber(num){ // 产 生 1 注 福利 彩票 号 码 ,并 将 号 码 回填 到 文本 框 中 } 


5. 实 训 过 程 与 指导 

编程 实现 “简易 福彩 投注 程序 ”页 面 ,具体 步骤 如 下 : 

(1) 文档 结构 的 创建 

@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程序 名 称 为 prj_12_1. html, 格 式 如 下 : 


< 一 二 过 


@ 保存 文件 。 输 入 文件 名 为 prj_12_1. html, 选 择 编码 类 型 为 UTF-8, 然 后 保存 文件 。 

(2) 页 面 内 容 设 计 

在 body 标记 中 插入 图 层 、 表 单 、 表 格 、 表 单 控 件 等 标记 ,完成 页 面 布局 设计 。 

@ 在 body 中 插入 1 个 div。 

@ 在 div 中 插入 img 标记 ,设置 src 属性 为 ico_71. gif, 宽 度 和 高 度 为 默认 。 

@ 在 div 中 插入 form 标记 ,并 在 其 中 插入 3 行 4 列 的 表格 ,设置 表格 对 齐 属性 为 居中 
对 齐 ,设置 表格 标题 为 “< h2 > 福利 彩票 投注 助手 </h2 >”。 

@ 在 表格 前 3 列 单元 格 分 别 插入 “彩票 号 码 ”、 单 行 输入 文本 框 . 普 通 按钮 ,第 4 列 跨 3 
行 合并 ,插入 1 个 重 置 按钮 ,设置 value 为 "清空 >。 设置 3 个 文本 输入 框 的 id 属性 分 别 为 
numberl .number2 ,number3 ,大 小 为 28 ,设置 只 读 属 性 。 设 置 3 个 普通 按钮 的 value 值 为 
“投注 ”, 指 派 onclick 属性 的 值 分 别 为 selectnumber('numberl ') 、 selectnumber(C'number2 7)、 
selectnumber( "number3 ') 。 

@ 保存 文件 ,并 用 浏览 器 预览 一 下 未 定义 样式 时 的 页 面 ,效果 如 图 1-12-2 所 示 。 

(3) 表现 设计 

在 style 标记 中 定义 图 层 div、td 和 h2 标记 的 样式 ,具体 样式 定义 要 求 如 下 : 

g@ 定义 div 标记 样式 。div 样式 为 边界 上 下 0px、\ 左 右 自动 ,背景 颜色 #00FF99 ,宽度 
450px, 高 度 260px, 边 框 2px、 实 线 、 颜 色 #ff3300, 颜 色 white。 

@ 定义 h2 标记 样式 。h2 样式 为 字体 大 小 28px、 文 本 水 平 居中 。 

@ 定义 td 标记 样式 。td 样式 为 字体 大 小 18px、 字 体 标 粗 。 
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图 1-12-2 简易 福彩 投注 程序 初始 状态 


(4) 定义 JavaScript 函数 
中 获取 页 面 对 象 $ (id)。 


function $ (id){return document. getElementById(id);} 


@ 产生 num 注 彩票 selectnumber(num)。 


function selectnumber (num){ 
// 彩 票选 号 助手 , 除 本 方法 外 ,还 有 许多 方法 
var number = new Array( ); 
for (i=0;i<=7 ;i+t+) 
{ 
tmp = Math. floor(Math. random() * 30 + 1); // 下 会 入 
for (var j= 0;j<= number. length— 1 ;j++) 
{ 
if (tmp== number[j]) 


{ ”// 重 号 处 理 
tmp = Math. floor(Math. random() * 30 + 1); 
j=0; // 重 新 初始 化 循环 变量 
下 
} 
number[ i] = tmp; 
} 
$ (num). value = number. sort(). join(" "); // 回 填 产 生 的 彩票 号 码 
| 
(5) 保存 并 查看 网 页 
完成 代码 设计 后 ,保存 网 页 文件 。 通 过 浏览 器 查看 页 面 , 单 击 “ 投 注 ”" 和 “清空 
现 彩 票 号 码 产生 与 清空 的 功能 。 
项 目 35 设计 江苏 福彩 投注 站 彩票 投注 助手 
1. 实 训 要 求 


编程 实现 江苏 福彩 投注 站 彩票 投注 助手 ,页 面 布 局 效果 如 图 1-12-3 所 示 。 


”按钮 , 实 
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1-12-3 ”福彩 投注 站 彩票 助手 页 面 


功能 要 求 如 下 : 

(1) 界面 上 设置 5 个 按钮 1 个 列表 框 。 

(2) 采用 图 层 ,并 设置 图 层 的 背景 与 背景 图 片 ,效果 如 图 1-12-3 所 示 。 

(3) 在 div 中 插入 3 行 3 列表 格 , 通 过 单元 格 合并 ,插入 普通 按钮 .列表 框 等 表单 控件 ， 
完成 页 面 布局 。 

(4) 单 击 “ 机 选 1 注 ” 按 钮 ,调用 selectrNumber(1), 将 1 注 的 号 码 形成 字符 串 添 加 到 列 
表 框 中 ,并 将 每 次 产生 的 第 1 行 号 码 作为 预选 项 ,高 亮度 显示 ,如 图 1-12-4(a) 所 示 。 编 写 通 
用 的 产生 n 注 号 码 selectrNumber(n) 函 数 。 

(5) 单 击 “ 机 选 5 注 ? 按 钮 ,调用 selectrNumber(5), 将 5 注 的 号 码 形成 字符 串 添加 到 列 
表 框 中 ,并 将 每 次 产生 的 第 1 行 号 码 作为 预选 项 ,高 亮度 显示 ,如 图 1-12-4(b) 所 示 。 
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图 1-12-4 单 击 机 选 1 注 和 机 选 5 注 时 的 页 面 
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四 
1-12-4 ( 续 ) 


(6) 单 击 “ 机 选 10 注 ? 按 钮 ,调用 selectNumber(10) ,将 10 注 的 号 码 形成 字符 串 添加 到 
列表 框 中 ,并 将 每 次 产生 的 第 1 行 号 码 作为 预选 项 ,高 亮度 显示 ,如 图 1-12-5 所 示 。 


ex | 
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图 1-12-5 单 击 “机 选 10 注 ? 时 的 页 面 


(7) 单 击 “ 删 除 ”按钮 ,将 列表 框 中 选中 的 列表 项 删除 ,如 果 列 表 框 无 列表 项 可 删 , 则 用 
告警 消息 框 提示 出 错 信 息 , 如 图 1-12-6 所 示 。 











127.0.0.1:8020 显示 : 
请 先 选 择 列表 项 后 再 铀 除 ! 

















图 1-12-6 未 选择 选项 单 击 删除 按钮 时 的 页 面 


(8) 单 击 “ 全 部 删除 ”按钮 ,将 列表 框 中 的 所 有 列表 项 全 部 删除 ,如 果 列表 框 无 列表 项 可 


删 , 则 用 告警 消息 框 提 示 出 错 信息 ,如 图 1-12-7 所 示 ,代码 如 下 所 示 : 





| 127.0.0.1:8020 显示 : 
请 先 渤 近 列 表 项 后 再 江 除 ! 








明 








x 





1-12-7 无 选项 单 击 删 除 按钮 时 的 页 面 


2. 实 训 内 容 

(1) 内 部 样式 表 的 定义 与 应 用 。 

(2) JavaScript 自 定义 函数 的 编程 。 
(3) 事件 句柄 和 事件 处 理 程序 绑 定 。 
(4) DOM 节点 操作 方法 的 应 用 。 
(5) 表格 与 表单 混合 布局 应 用 。 

3. 实 训 所 需 知识 点 

(1) 表单 form 标记 


< form name = "myform" method= "post" action="" onsubmit = ""> 
< input type = "button" value = "机 选 1 注 " onclick = "selectNumber(1);"> 
< input type = "button" value = "机 选 5 注 " onclick = "selectNumber(5);"> 


</form> 


(2) 样式 style 标记 
< style type = "text/css"> 


select{width:100px; height:145px;} 
</style> 


(3) 脚本 script 标记 

< script type = "text/javascript" src = "">…</script> 
(4) 标题 字 h2 标记 

< h2 > 福彩 投注 站 投注 彩票 助手 </h2 > 

(5) 表格 table 标记 

<table> 


<tr> 
<td> 


< input type = "button" value = "机 选 10 注 " onclick = "selectNumber(10);"> 


</td> 
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<td> 
< input type = "button" value = "全 部 删除 " onclick = "delSelectAl1();"> 
</td> 
</tr> 
</table> 


(6) 列表 框 select 标记 


< select name = "number8" jd = "number8" size= "5"> 
<option value = "c3" selected> 机 选 1 注 </option > // 设 为 预选 项 
< option>…</option> 

</select > 


设置 列表 框 的 multiple 属性 可 以 使 列表 框 支持 多 选 ,设置 选项 option 标记 的 selected 
属性 可 以 使 某 一 列表 项 处 于 初始 选中 状态 。 
(7) 图 像 img 标记 


< img src= "ico_71.gif" width= "76" height = "72" border = "0" alt = ""> 


4. 定义 JavaScript 困 数 

(1) 选择 n 注 彩 票 号 码 selectNumber(n) 

使 用 嵌 套 for 循环 结构 实现 编程 ,外 循环 负责 产生 n 注 号 码 ; 内 循环 负责 利用 随机 函数 
产生 8 个 [01 一 30] 的 任意 整数 ,并 将 结果 保存 到 数组 中 去 ,然后 将 数组 中 存放 的 元 素 串 起 来 
赋 给 一 个 list 变量 ,采用 下 列 代码 完成 向 列表 框 中 添加 1 注 彩 票 。 


Var opt = document. createElement ("option"); // 产 生 选 项 节点 

var opt_text = document. createTextNode( list); // 产 生 文 本 节点 

opt. value = j; // 记 下 添加 列表 项 的 个 数 
opt. appendChild(opt_text); // 将 文本 添加 给 选项 
objsel. appendChild(opt); // 将 选项 添加 给 列表 框 


(2) 删除 选中 列表 项 delSelect() 
通过 列表 框 的 selectedIndex 属性 值 来 删除 选中 列表 项 ,如 果 用 户 未 选中 其 值 为 一 1, 否 
则 有 具体 的 值 , 可 以 通过 选项 的 remove(index) 来 删除 。 


Var strIndex = objSelect. selectedIndex; 
objSelect. options. remove( strIndex) ; 


(3) 删除 所 有 列表 项 delSelectAl1O) 


var objSelect = $ ("number8"); 

var strIndex = objSelect. options. length; 
if (strIndex>0) 

{ 


for (i=0;i<= strIndex— 1;i++) 
{objSelect. options. remove(0);} // 始 终 删除 第 0 个 选项 
} 


5. 事件 处 理 句柄 与 事件 处 理 程序 的 绑 定 


< input type = "button" value = "机 选 1 注 " onclick = "selectNumber(1);"> 

< input type = "button" value = "机 选 5 注 " onclick = "selectNumber(5);"> 

< input type = "button" value = "机 选 10 注 " onclick = "selectNumber(10);"> 
< input type = "button" value = "删除 " onclick = "delSelect();"> 

< input type = "button" value = "全 部 删除 " onclick = "delSelectAll1();"> 


6. DOM 节点 访问 、 创 建 、 修 改 
(1) 访问 指定 节点 。 
。 按 指定 ID 访问 节点 ;getElementById(idname) ,返回 指定 的 元 素 。 
。 按 指定 Name 访问 节点 : getElementsByNameCname) ,返回 同名 元 素数 组 。 
。 按 指定 Tagnmae 访问 节点 : getElementsByTagName(tagname) ,返回 带 有 指定 标 
记名 的 对 象 的 集合 。 
(2) 创建 DOM 节点 的 方法 。 
。 创建 元 素 节点 : createElement(tagname) ,创建 标记 名 为 tagname 的 节点 。 
。 创建 文本 节点 :createTextNode(text) ,创建 包含 文本 text 的 文本 节点 。 
。 创建 文档 碎片 :createDocumentFragment()，documentFragment 是 一 个 无 对 象 的 
document 对 象 。 
(3) 修改 节点 方法 。 
。 删除 一 个 子 节点 : removeChild(“ 节 点 名 ”) 。 
。 添加 子 节点 : 父 节点 对 象 . appendChild( 子 节点 对 象 ) 。 
。 在 指定 节点 前 插入 一 个 节点 : insertBefore(B,.A) ,将 也 元 素 插 入 到 A 元 素 前 。 
。 用 一 个 节点 替换 另 一 个 节点 : replaceChildCnewChild,oldChild) 。 
。 克隆 一 个 节点 : cloneNode(boolean): 它 有 一 个 参数 ,true, 带 文字 ; false, 不 带 文字 。 
7. HTML DOM Select 对 象 的 属性 与 方法 
Select 对 象 代 表 HTML 表单 中 的 一 个 下 拉 列 表 。 在 HTML 表单 中 ,< select ></select > 
标记 每 出 现 一 次 ,一 个 Select 对 象 就 会 被 创建 。 可 通过 遍历 表单 的 elements[ ] 数 组 来 访问 某 
个 Select 对 象 ,或 者 使 用 document. getElementById() 。 
(1) Select 对 象 集合 
options[]: 返回 包含 下 拉 列 表 中 的 所 有 选项 的 一 个 数组 。 
(2) Select 对 象 属性 
id: 设 置 或 返回 下 拉 列 表 的 id。 
length: 返 回 下 拉 列 表 中 的 选项 数目 。 


selectedIndex: 设 置 或 返回 下 拉 列 表 中 被 选项 目的 索引 号 。 | 
size: 设 置 或 返回 下 拉 列 表 中 的 可 见 行 数 。 2 
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(3) Select 对 象 方法 
。 selectObject. add(option ,before) :向 下 拉 列 表 添 加 一 个 选项 。 
。 selectObject. remove(index) : 从 下 拉 列 表 中 删除 一 个 选项 。 


function removeOption() 
{ 
var x= document. getElementById("mySelect") 
x. remove(x. selectedIndex) // 删 除 某 一 选项 
直 


8. 实 训 过 程 与 指导 

编程 实现 江苏 福彩 投注 站 彩票 投注 助手 页 面 , 具 体 步 又 如 下 : 

(1) 文档 结构 的 创建 

@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程 序 名 称 为 prj_12_2. html, 格 式 如 下 : 


35 一 一 到 


@ 保存 文件 。 输 入 文件 名 为 prj_12_2. html, 选 择 编码 类 型 为 UTF-8 ,然后 保存 文件 。 

(2) 页 面 内 容 设 计 

在 body 标记 中 插入 图 层 、 表 单 、 表 格 、 表 单 控件 、h2 img、 列 表 框 等 标记 ,完成 页 面 布局 
设计 。 

@ 在 body 中 插入 1 个 div。 

@ 在 div 中 插入 img 标记 ,设置 src 属性 为 ico_71. gif ,宽度 和 高 度 为 默认 值 。 

@ 在 div 中 插入 form 标记 ,并 在 其 中 插入 1 个 3 行 3 列 的 表格 ,采用 2 号 标题 字 设 置 
表格 标题 为 “福彩 投注 站 投注 彩票 助手 ”。 

a. 第 1 行 中 第 2 个 单元 格 跨 3 行 合 并 ,3 个 单元 格 分 别 插入 value 为 “机 选 1 注 ” 的 按 
钮 id 和 name 均 为 number8 的 列表 框 、value 为 “删除 ”的 按钮 。 并 为 2 个 普通 按钮 指派 
onclick 属性 ,分别 绑 定 selectNumber(1) .delSelect() 函数 。 

b. 第 2 行 中 2 个 单元 格 分 别 插入 value 为 “机 选 5 注 ” 的 按钮 和 1 个 “&nbsp;”。 并 为 
该 按钮 指派 onclick 属性 , 绑 定 selectrNumber(5) 函 数 。 

c. 第 3 行 中 2 个 单元 格 分 别 插入 value 为 “机 选 10 注 ” 的 按钮 和 value 为 “全 部 删除 ”的 
按钮 。 并 为 2 个 普通 按钮 指派 onclick 属性 ,分 别 绑 定 selectrNumber(10)、delSelect All() 
函数 。 

(3) 表现 设计 

在 style 标记 中 定义 图 层 、 列 表 框 \h2 ,input 的 样式 。 具 体 样式 定义 要 求 如 下 : 

@ 定义 列表 框 样式 。select 样式 为 宽度 300px、 高 度 145px。 

@ 定义 h2 标记 样式 。h2 样式 为 文本 水 平 居 中 、 字 体 大 小 28px、 上 下 填充 10px、 左 右 
填充 自动 。 

@ 定义 div 样式 。 图 层 div 样式 为 宽度 550px、 高 度 320px、 边 界 上 下 0px、 边 界 左 右 自 
动 、 颜 色白 色 、 边 框 粗细 2px、 线 型 实 线 、 线 颜色 井 0077BB。 


@ 定义 input 样式 。input 样式 为 宽度 80px、 高 度 40px。 


< style type = "text/css"> 

div{background: url("fc_logo. jpg") right top no - repeat; width: 550px; height: 320px; 
margin:0 auto; border:2px solid #0077BB;color:white;} 

h2{font — size:28px;text — align:center;padding:10px auto;} 

select{width:300px; height:145px;} 

input{width:80px; height:40px;} 
</style> 


(4) 定义 JavaScript 函数 。 
Q@ 获取 页 面 对 象 $ (id)。 


function $ (id){return document. getElementById( id);} 
@ 产生 mn 注 福利 彩票 号 码 函 数 selectNumberCn) 。 
function selectNumber(n){ 

// 彩 票选 号 助手 


var number = new Array(); 
var objsel = $ ("number8"); 


Var selnum = objsel. options. length; // 保 存 选项 添加 前 总 数 
for (j=0;j<=n-1;j++) 
{ 

var list= ""; 

for (i=0;i<=7 ;i++) // 产 生 1 注 号 码 

{ 


var tmp = Math. floor(Math. random() * 30 + 1); 
if (tmp<10) {tmp= "0" +tmp; } 
for (var k=0;k<=number.length— 1 ;k++) 


{ 
if (tmp== number[k]) 
{ // 重 号 处 理 
tmp = Math. floor(Math. random( ) * 30 + 1); 
if (tmp<10) {tmp= "0" + tmp; } 
k=0; 
} 
} 
number[i] = tmp; 
| 
list = number. join(" "); //1 注 彩 票 号 码 
// 写 人 到 列表 框 中 
var opt = document. createElement("option" ) ; // 产 生 选 项 节点 
var opt_text = document. createTextNode( list); // 产 生 文本 节点 
opt. value= j; // 记 下 添加 列表 项 的 个 数 
opt. appendChild(opt_text); // 将 文本 添加 给 选项 
objsel. appendChild( opt); // 将 选项 添加 给 列表 框 
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// 始 终 将 新 添加 的 第 一 个 列表 项 作为 预选 项 
objsel. selectedIndex = selnum; 


} 
@ 删除 1 注 福利 彩票 号 码 函 数 delSelect()。 


function delSelect(){ 

var objSelect = $ ( "number8"); 

Var strIndex = objSelect. selectedIndex; 

if (strIndex!= -1) 

{ objSelect. options.remove(strIndex); 

} else{alert(" 请 先 选择 列表 项 后 再 删除 !");} 
| 


@ 删除 所 有 福利 彩票 号 码 函 数 delSelectAll()。 


function delSelectAll(){ 
var objSelect = $ ("number8"); 
var strIndex = objSelect. options. length; 
if (strIndex > 0) 
{ 
for (i=0;i<= strIndex— 1;i++) 
{objSelect. options. remove(0);} 
} else{alert(" 请 先 选 择 列表 项 后 再 删除 !");} 
} 


(5) 保存 并 查看 网 页 
完成 代码 设计 后 ,保存 网 页 文件 。 通 过 浏览 器 查看 效果 ,分 别 单 击 页 面 上 的 所 有 按钮， 
验证 所 实现 的 功能 。 


课外 拓展 训练 12 


1. 编写 JavaScript 程序 实现 “列表 框图 像 浏览 器 ”, 如 图 1-12-8 所 示 。 要 求 如 下 : 

(1) 在 body 中 插入 1 个 div。 定 义 div 样式 为 边界 上 下 10px、 边 界 左右 自动 .边框 1px、 
实 线 .颜色 # 020202、 宽 度 300px、 高 度 280px\ 文 本 居中 对 齐 .填充 20px。 

(2) 在 div 标记 中 分 别 插入 1 个 img、1 个 bl 个 select 4 个 option 标记 。img 标记 初 
始 显示 图 像 为 imgl.jpg。b 标记 的 内 容 为 “列表 框图 像 浏览 器 *。 定 义 列表 框 的 onchange 
事件 句柄 , 绑 定 showImg() 函 数 ,列表 框 中 显示 4 个 列表 项 ,分 别 为 选择 图 像 (默认 选项 ) 、 
都 市 树木 1(Gimgl. jpg) .卡通 图 片 2(Gimg2. jpg) 卡通 图 片 3(Gimg3. jpg) ,通过 选项 的 value 属 
性 获取 图 像 文件 名 。 

(3) 编写 函数 showImg(oSel) ,oSel 是 参数 ,表示 选择 哪 一 个 选项 。 要 求 从 下 拉 列 表 框 
中 选择 不 同 的 选项 时 能 够 自动 浏览 不 同 的 图 像 。3 个 图 像 文件 分 别 为 imgl. jpg img2. jpg、 
img3. jpg。 

(4) 程序 名 称 为 project_12_1. html。 
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图 1-12-8 ”列表 框图 像 浏览 器 
2. 编写 JavaScript 程序 实现 “ 选 购 图 书 ” 程 序 。 该 程序 具有 单一 选 购 、 单 一 退 购 、 清 空 、 
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127.0.0.1:8020 显示 : 









































2. 单 击 此 按钮 ， 完 成 退 购 诗 S 和 付款 138 元 , 欢迎 下 次 光临 1 
EC 
实 
Ml 
图 1-12-10 单一 退 购 页 面 和 结账 页 面 位 
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(1) 在 body 标记 中 插入 form 标记 ,并 在 form 中 插入 3 行 2 列 的 表格 .2 个 列表 框 、 
3 个 普通 按钮 和 1 个 重 置 按钮 。 表 格 标题 为 “ 选 购 图 书 ”。 左 边 列 表 框 中 选项 信息 分 别 为 
“计算 机 网 络 (32 元 )”“ 数 据 结构 (58 元 )”*Java 程序 设计 (45 元 )”“Web 前 端 开发 技术 
(49 元 )”Web 前 端 开发 技术 实验 与 实践 (35 元 )”“ 计 算 机 组 成 原理 (30 元 )”“ 数 据 库 开发 技 
术 (30 元 )”。 
(2) 定义 3 个 普通 按钮 的 value 属性 分 别 为 “单一 选 购 ”“ 单 一 退 购 “结账 ”,1 个 重 置 按 
钮 的 value 属性 为 “清空 ”。 
(3) 编写 单一 选 购 doone() .单一 退 购 undoone() ,清空 clearnone() ,结账 checkout() 函 
数 , 其 功能 分 别 如 下 : 
。 单一 选 购 doone() : 从 左边 列表 框 中 选择 1 个 选项 , 单 击 “ 单 一 选 购 ” 按 钮 ,自动 添加 
到 右边 “图 书 采购 区 ”列表 框 中 。 
。 单一 退 购 undoone() : 从 右边 列表 框 选择 任 1 个 选项 后 , 单 击 “ 单 一 退 购 ”按钮 后 ,将 
从 右边 列表 框 中 删除 该 选项 。 
。 清空 clearnone(): 单 击 “清空 ?按钮 ,将 所 有 选 购 图 书信 息 从 右边 列表 框 中 全 部 
删除 。 
。 结账 checkout() 函 数 : 单 击 “ 结 账 ”按钮 后 ,将 右边 列表 框 中 所 选 购 的 图 书 的 价格 进 
行 汇总 ,然后 通过 告警 消息 框 输入 总 价 , 如 图 1-12-10(b) 所 示 。 
(4) 程序 名 称 为 project_12_2. html。 
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【 实 训 目标 】 

(1) 学 会 使 用 Web 本 地 存储 对 象 解决 客户 端 数据 存储 问题 。 

(2) 掌握 Canvas 基本 语法 和 学 会 绘制 各 种 图 形 .文字 及 图 像 。 

(3) 学 会 使 用 Web 拖 放 技术 解决 简单 的 购物 车 设计 问题 。 

(4) 理解 Web Worker 多 线程 工作 原理 ,学 会 使 用 多 线程 解决 简单 的 实际 应 用 。 
【 实 训 内 容 】 

(1) 使 用 localStorage 和 sessionStorage 对 象 解决 简易 客户 端 数据 存储 。 

(2) 使 用 JavaScript 脚本 实现 Canvas 上 绘制 图 像 的 功能 。 

(3) 使 用 HTML5 拖 中 (Drag 和 drop) 实 现 页 面 对 象 从 一 个 位 置 移动 到 另 一 个 位 置 。 
(4) 使 用 Web Worker 实现 后 台 运 行 计算 工作 量 大 的 JavaScript 任务 。 

(5) 使 用 IndexedDB 实现 客户 端 数 据 大 容量 存储 。 

【 实 训 项 目 】 

(1) 用 Web Storage 开发 当当 网 图 书评 论 页 面 。 

(2) 用 HTML5 Canvas 开发 一 个 小 游戏 。 

(3) 用 HTML5 拖 忠 开发 购物 车 。 

(4) 使 用 Web Worker 做 后 台数 值 (算法 ) 计 算 。 


项 目 36 用 Web Storage 开发 当当 网 图 书评 论 页 面 


1. 实 训 要 求 

采用 Web Storage 开发 一 个 简易 当当 网 图 书评 论 页 面 , 页 面 如 图 1-13-1 所 示 。 功 能 要 
求 如 下 : 

(1) 单 击 “ 写 入 图 书评 论 ” 按 钮 ,对 应 函数 为 writeComment() ,其 功能 为 每 单 击 一 次 , 累 
计 一 次 评论 总 数 ,并 同时 刷新 页 面 上 的 评论 总 数 , 然 后 将 用 户 名 、 评 论 内 容 、 评 定 星 级 及 评论 
时 间 存 人 客户 端 数据 中 。 

(2) 单 击 “查看 历史 评论 ?按钮 ,对 应 的 函数 为 queryComment() ,其 功能 为 将 所 有 的 评 
论 内 容 均 显 示 在 按钮 下 面 的 多 行文 本 行 域 中 。 

(3) 单 击 “ 清 除 历史 评论 ”按钮 ,对 应 的 函数 为 clearComment() ,其 功能 为 将 所 有 的 评 
论 内 容 清除 ,同时 清除 多 行文 本 域 中 的 所 有 内 容 。 

(4) 采用 HTML5 文档 结构 完成 页 面 设计 。 
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用 户 名 : admin 
正版 书 ， 好 用 ， 老 师 私下 推荐 买 的 














是 级 满意 度 (大 ) : 
写 入 图 书评 论 
评论 统计 :1 
admin 襄 : 

评论 内 容 :正版 书 ， 好 用 ， 老 师 私下 推荐 买 的 


星 级 : 
评论 时 间 : 2017/8/8 下 午 7:44:38 






































1-13-1 当当 网 图 书评 论 页 面 


2. 实 训 内 容 

(1) localStorage 和 sessionStorage 对 象 的 常用 方法 的 应 用 。 
(2) HTML5 新 增 结构 元 素 的 使 用 。 

(3) JavaScript 函数 的 定义 与 使 用 。 

(4) 循环 结构 遍历 Web Storage 对 象 。 

(5) JSON 对 象 与 字符 串 型 对 象 的 转换 方法 。 

(6) Date 对 象 的 使 用 。 

(7) 样式 表 的 定义 与 使 用 。 

3. 实 训 所 需 知 识 点 

(1) 图 层 div 标记 


<div id= ""></div> 
(2) 样式 style 标记 
< style type = "text/css"> 
.btn {width: 120px; height: 40px;text — align: center;} 


</style> 


(3) 脚本 script 标记 


< script type = "text/javascript" src="*.js"></script> 


(4) 表单 form 标记 


< form name = "myform" method = "post" action = "" onsubmit = ""> 
< input type = "text" list= "star" name = "star" required= "required" /> 
< datalist id= "star" name = "stars"> 
<option value = " 雄 丰 龙 龙 女 "></option> 
< option value= " 真 "></option> 
</datalist> 
</form> 


(5) HTML5 文档 结构 元 素 标记 


<article> 
< header id = "header"></header > 
<aside>< img src= "webjd 1. jpg" /></aside> 
< section> 
< textarea id = "commmentAera" rows="5" cols = "80"></textarea> 
</section> 
</article> 


(6) DOM 通过 ID 获取 页 面 元 素 的 方法 


document. getElementById( "commmentAera") 


(7) localStorage 和 sessionStorage 对 象 的 常用 方法 
。 localStorage. setItem(key,value) : 保存 数据 。 

。 localStorage. getItem(key) : 读 取 数 据 。 

。 localStorage. removeItem(key) : 删除 单个 数据 。 
。 localStorage. clear() : 删除 所 有 数据 。 

。 localStorage. key(index) : 得 到 某 个 索引 的 key。 
(8) JSON 对 象 与 字符 串 对象 的 转换 方法 


// 定 义 JSON 对 象 ,并 永久 存 人 localStorage 中 
Var onecomment = {}; 

oneComment. name = myForm. username. value; 
oneComment. content = myForm. mycomm. value; 
oneComment. star = myForm. star. value; 

var newdate = new Date(); 


oneComment. commt ime = newdate. toLocalString( ); // 将 日 期 转换 为 本 地 字符 串 格式 
var oneComment = JSON. stringify(oneComment); // 将 JSON 对 象 转换 为 字符 串 
localStorage. setItem("comment",oneComment) ; // 存 人 数据 


// 取 出 数据 ,并 将 字符 串 转换 为 JSON 对 象 
var comment = localStorage. getItem( localStorage. key(i)); 


comment = JSON. parse( comment ); // 将 字符 型 转换 为 JSON 对 象 实 
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(9) 事件 处 理 函 数 的 绑 定 


< input type = "button" onclick = "writeComment(); " value = " 写 入 图 书评 论 "> 
< input type = "button" onclick = "queryComment(); ”value = "查看 历史 评论 "> 
< input type = "button" onclick = "clearComment(); ”value = "清除 历史 评论 "> 


4. 实 训 过 程 与 指导 

采用 Web Storage 开发 一 个 简易 当当 网 图 书评 论 页 面 , 具 体 步骤 如 下 : 

(1) 文档 结构 的 创建 

@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程序 名 称 为 prj_13_1. html, 格 式 如 下 : 


<! -- prj_ 13 1.html --> 


@ 保存 文件 。 输 入 文件 名 为 prj_13_1. html, 选 择 编码 类 型 为 UTF-8, 然 后 保存 文件 。 

(2) 页 面 内 容 设计 

在 body 标记 中 插入 图 层 .HTML5 结构 元 素 、 图 像 .表单 .表单 控件 等 标记 ,完成 页 面 布 
局 设计 。 

@ 在 body 中 插入 1 个 div。 

@ 在 divy 中 插入 article 标记 ,并 在 其 中 分 别 插入 header 和 2 个 div 标记 。 

@ 在 header 标记 中 插入 img,strong 标记 ,分 别 加 载 当 当 网 LOGO(dangdangLOGO. jpg) 
和 “图 书评 论 ”。 

@ 插入 第 2 个 div 标记 ,并 在 其 中 插入 aside 标记 ,在 aside 中 分 别 插入 2 个 img 标记 ， 
加 载 两 本 书 的 图 像 (webdd_1. jpg、webdd_2. jpg)。 

@ 插入 第 3 个 div, 并 在 div 中 插入 form 标记 。 在 form 中 分 别 插入 相关 表单 元 素 。 具 
体 如 下 所 示 : 

a. 插入 “用 户 名 ”输入 文本 框 ,要 求 内 容 不 为 空 、 占 位 符 的 内 容 为 “请 输入 用 户 名 ”。 

b. 插入 多 行文 本 域 , 行 数 为 5、 列 数 为 80、 占 位 符 内 容 为 “请 说 点 什么 吧 !1”。 

c. 插入 一 个 数据 列表 (input 标记 的 新 属性 list, 必须 与 datalist 标记 配合 使 用 ) ,其 中 
datalist 标记 中 插入 5 个 选项 ,用 于 显示 星 级 ( 真 ) 等 级 , 共 5 个 等 级 。 

d. 插入 3 个 普通 按钮 ,其 value 值 分 别 为 “ 写 入 图 书评 论 “ 查 看 历史 评论 “清除 历史 评 
论 ”, 指 派 onclick 属性 的 值 分 别 为 writeComment() .queryComment() clearComment()。 

e. 插入 1 个 id 为 “commentSum” 的 label 标记 .作为 评论 总 数 显 示 区 域 。 

f. 插入 1 个 section 标记 ,并 在 其 中 插入 1 个 textarea 标记 。 其 中 textarea 标记 用 于 显 
示 历 史 评论 数据 ,其 id 为 “commentAera”, 行 数 为 5、 列 数 为 80。 

设计 完成 后 ,保存 并 预览 页 面 效果 ,如 图 1-13-2 所 示 。 

(3) 表现 设计 

在 style 标记 中 定义 图 层 header input 等 标记 的 样式 。 具 体 样式 定义 要 求 如 下 : 

@ 定义 内 嵌 图 层 # divl 样式 为 宽度 150px、 高 度 340px、 向 左 浮动 。 

@ 定义 内 骨 图 层 # div2 样式 为 向 左 浮动 . 行 高 为 2em。 

@ 定义 #header 样式 为 高 度 150px。 
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用 户 名 : 请 给 入 用 户 各 
请 说 点 什么 吧 ! 














旦 级 满意 度 (k) :| 
瑟 入 图 书评 论 | | 查看 历史 评论 
评论 统计 : 






































图 1-13-2 未 应 用 样式 时 当当 网 图 书评 论 页 面 


@ 定义 strong 标记 样式 为 字体 大 小 60px, 字 符 间距 4px, 颜 色 并 FF5555, 文 本 阴影 水 
平 . 垂 直 阴 影 位 置 .模糊 距离 分 别 为 5px、5px、3px, 阴 影 的 颜色 间 008899。 

@@ 定义 input 标记 . btn 样式 为 宽度 120px、 高 度 40px, 水 平 居 中 对 齐 。 

(4) 交互 行为 设计 

Qz 清除 历史 评论 clearComment() ,确认 框 信息 如 图 1-13-3 所 示 。 


function clearComment() { 
// 删 除 之 前 必须 询问 ,确认 后 再 删除 
// 调 用 localStorage 对 象 的 清除 方法 
// 将 多 行文 本 框 内 容 清空 





127.0.0.1:8020 显示 : 
确信 要 清除 所 有 评论 吗 ? 








1-13-3 ”删除 时 确认 框 信息 





@ 写 和 图书 评论 writeComment() ,每 成 功 写 一 次 ,必须 同时 更 新 评论 总 数 。 
和 
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var sum = 0; // 计 算 评论 总 数 
var oneComment = {}; // 定 义 一 个 空 的 评论 JSON 对 象 
function writeComment() { 

// 将 sum 的 初始 值 0 写 和 人 客户 端 中 


// 如 果 sum 存在 则 累加 1, 不 存在 则 初始 为 1 
// 形 成 JSON 对 象 ,并 永久 存 人 localStorage 中 
// 如 果 所 有 输入 项 均 有 内 容 则 分 别 设置 评论 JSON 对 象 中 的 属性 ,格式 如 下 所 示 : 
oneComment. name = myForm.username.value; 
oneComment. content = myForm.mycomm.value; 
oneComment. star = myForm. star.value; 
Var newdate = new Date(); 
oneComment. commtime = newdate.toLocalString(); 
// 将 JSON 对 象 转换 为 字符 型 
localStorage. setItem("comment", JSON. stringify(oneComment)); 
// 通 过 标签 标记 输出 统计 评论 总 数 
} 


@ 查询 历史 评论 queryComment() ,通过 多 行文 本 域 显示 评论 信息 。 


function queryComment() { 
// 遍 历 localStorage 中 存储 的 所 有 评论 信息 ,并 显示 所 有 评论 内 容 
var result = ""; // 定 义 保存 结果 的 变量 , 供 最 后 一 次 性 赋 给 多 行文 本 域 
// 如 果 localStorage 的 长 度 大 于 0, 则 进行 遍历 
// 采 用 for、while 等 循环 结构 ,依次 遍历 所 有 评论 
// 从 localStorage 中 获取 存储 key 名 称 ,方法 : getItem(localStorage. key(i)) 
// 将 字符 型 转换 为 JSON 对 象 ,方法 : JSON. parse(comment); 
// 结 果 变 量 result 表达 式 形成 
// 利 用 多 行文 本 域 显示 所 有 的 评论 信息 
} 


(5) 保存 并 查看 网 页 

完成 代码 设计 后 ,保存 网 页 文件 。 通 过 浏览 器 查看 页 面 ,分 别 单 击 3 个 按钮 ,检查 代码 
所 实现 的 功能 是 否 与 需求 相对 应 。 

x*【 思 考 与 提高 】 

(1) 如 果 将 localStorage 对 象 改 为 sessionStorage 对 象 , 运 行 结 果 有 什么 差异 ? 

(2) 如 果 采 用 IndexedDB 来 保存 用 户 的 评论 信息 ,实现 “ 写 入 图 书评 论 ”“ 查 询 历 史 评 
论 “ 清 除 历 史 评论 ”等 同样 的 功能 .代码 应 该 如 何 修改 ? 

提示 : 可 以 定义 一 个 评论 comment 对 象 ,属性 有 用 户 名 称 、 评 论 信息 ,评价 星 级 、 评 论 
时 间 等 。 然 后 创建 数据 库 、 创 建 对 象 仓 库 及 进行 对 象 的 增 、 删 、 查 等 操作 。 具 体 详 细 步 又 可 
参考 教材 17.1.3 节 和 17.5 节 的 内 容 来 进行 改编 。 


项 目 37 用 HTMLS Canvas 开发 一 个 小 游戏 


1. 实 训 要 求 
用 HTML5 Canvas 开发 一 个 “英雄 抓 怪物 ”的 小 游戏 ,页 面 如 图 1-13-4 所 示 。 功 能 要 求 


如 下 : 

(1) 通过 移动 上 .下 \ 左 、 右 箭头 ,将 英雄 图 像 与 怪物 图 像 尽 量 接近 , 当 两 者 之 间 相 差 大 
约 32 像素 时 , 即 判定 为 一 次 相遇 ( 相 碰 ) ,也 就 是 说 英雄 抓 住 怪物 1 次 ,屏幕 左上 角 会 动态 刷 
新 Goblins caught 后 面 的 数字 。 

(2) 每 相 碰 一 次 , 抓 住 怪物 的 次 数 累 加 1。 一 次 游戏 结束 后 ,自动 启动 下 一 次 游戏 ,同时 
英雄 图 像 自动 居中 (位 于 画布 的 正中 央 ) ,怪物 的 图 像 随机 出 现在 画布 的 任何 位 置 ,等 待 用 户 


再 次 操作 键盘 。 
Th 
站 简 昌 Canvas 沾 双 x > 
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| 
图 1-13-4 英雄 抓 怪物 小 游戏 初始 界面 


(3) 整个 程序 使 用 背景 英雄、 怪物 3 张 图 像 ,文件 名 分 别 为 background. png、hero. 
png、monster. png。 

2. 实 训 内 容 

(1) HTML5 Canvas 新 标记 的 应 用 。 

(2) JavaScript 函数 的 定义 与 使 用 。 

(3) DOM 节点 访问 操作 。 

(4) 动态 分 派对 象 事件 句柄 。 

(5) 学 会 使 用 requestAnimationFrame() 加 载 动画 。 

(6) 学 会 使 用 Canvas 绘制 图 像 。 

(7) 学 会 使 用 Canvas 绘制 文本 。 

3. 实 训 所 需 知识 点 

(1) 脚本 script 标记 














< script type = "text/javascript" src= "js/game. js"></script> 
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(2) 画布 Canvas 标记 

< canvas id = "canvas" width = "512" height = "480"></canvas> 
(3) 主体 body 标记 

<body style = "text — align: center; margin: 0 auto;"></body> 


(4) 加 载 动 画 requestAnimationFrame() 


window. requestAnimationFrame() 将 告知 浏览 器 马上 要 开始 动画 效果 。 这 个 方法 就 


是 传递 给 window. requestAnimationFrame() 的 回调 函数 。 


这 个 方法 原理 其 实 与 setTimeout()/setInterval() 差 不 多 ,通过 递归 调用 同一 方法 来 不 
断 更 新 画面 以 达到 动 起 来 的 效果 ,但 它 优 于 setTimeout()/setInterval() 的 地 方 在 于 它 是 由 
浏览 器 专门 为 动画 提供 的 API, 在 运行 时 浏览 器 会 自动 优化 方法 的 调用 ,并 且 如 果 页 面 不 是 


激活 状态 下 的 话 ,动画 会 自动 暂停 ,有 效 节省 了 CPU 开销 。 


该 方法 可 以 直接 调用 ,也 可 以 通过 window 来 调用 ,接收 一 个 函数 作为 回调 ,返回 一 个 
ID 值 ,通过 把 这 个 ID 值 传 给 window. cancelAnimationFrame() 可 以 取消 该 次 动画 。 语 法 


如 下 : 


requestAnimationFrame(callback); //callback 为 回调 函数 
(5) Canvas 绘制 图 像 方法 


ar canvas = document. createElement("canvas"); 


var ctx = canvas.getContext("2d"); // 生 成 绘图 环境 
ctx. drawImage( bgImage, 0, 0); // 背 景 图 像 从 (0,0) 处 开始 绘制 
ctx. drawImage( heroImage, hero.x, hero.y); // 从 指定 位 置 处 开始 绘制 


(6) Canvas 绘制 文本 方法 


ctx. fillStyle = "rgb(255, 10, 10)"; // 设 置 填充 样式 

ctx. font = "24px Helvetica"; // 设 置 字体 

ctx. textAlign = "left"; // 设 置 对 齐 方式 

ctx. textBaseline = "top"; // 设 置 当前 文本 基线 位 置 


ctx. fillText("Goblins caught: " + monstersCaught, 32, 32);  // 填 充 文本 


(7) JavaScript 函数 定义 方法 


function render() {// 函 数 体 ; } // 常 规 方法 
var main = function () { // 定 义 函 数 变量 
var now = Date.now(); // 获 取 当 前 时 间 
var delta = now — then; // 计 算 两 次 游戏 之 间 的 时 间 差 
update(delta / 1000); 
render( ); 
then = now; 
// 立即 调用 主 函数 


requestAnimationFrame(main); // 请 求 动画 帧 ,一 种 循环 执行 动画 函数 


头 : 


(8) 游戏 对 象 的 定义 


var hero = { // 定 义 3 个 属性 ,记录 英雄 对 象 在 屏幕 上 的 位 置 及 移动 速度 
speed: 256, // 每 秒 运动 的 像素 ,英雄 需要 移动 
> 4 | 


var monster = {x:0,y:0}; ”// 定 义 2 个 属性 ,记录 怪物 在 屏幕 上 的 坐标 ,游戏 中 不 移动 
(9) Date 对 象 的 应 用 
var now = (new Date() ). getTime(); // 返 回 1970 年 1 月 1 日 与 指定 日 期 之 间 的 毫秒 数 


(10) 键盘 事件 监听 函数 
4 个 方向 键 对 应 的 e. keyCode 的 值 如 下 : 左 箭头 : 37; 上 箭头 : 38; 右 箭头 : 39; 下 箭 
40。 监 听 事 件 代码 如 下 所 示 : 


addEventListener( "keydown", function (e) { // 增 加 keydown 事件 监听 


keysDown[ e. keyCode] = true; // 把 用 户 的 输入 先 保存 下 来 而 不 是 立即 响应 
}, false); 
addEventListener( "keyup", function (e) { // 增 加 keyup 事件 监听 

delete keysDown[ e. keyCode]; // 删 除 这 个 按键 的 值 
}, false); 


4. 实 训 过 程 与 指导 

用 HTML5 Canvas 开发 一 个 英雄 抓 怪 物 的 小 游戏 ,具体 步骤 如 下 : 

(1) 文档 结构 的 创建 

@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 


页 ,在 首 行 插入 注释 语句 , 注 明 程序 名 称 为 prj_13_2. html, 格 式 如 下 : 


ee 


@ 保存 文件 。 输 入 文件 名 为 prj_13_2. html, 选 择 编码 类 型 为 UTF-8, 然 后 保存 文件 。 
(2) 页 面 内 容 设 计 
在 body 标记 中 插入 脚本 ,完成 页 面 布局 设计 ,格式 如 下 : 


< script src = "js/game. js"></script > 


设计 完成 后 ,保存 ,此 时 页 面 上 没有 任何 内 容 , 如 图 1-13-5 所 示 。 
(3) 表现 设计 
设置 body 标记 的 style 属性 。 其 值 为 内 容 水 平 居 中 、 边 界 上 下 为 0、 边 界 左 右 自 动 。 其 


目的 是 让 图 像 始 终 水 平 居中 显示 。 


(4) 交互 行为 设计 
实现 游戏 的 JavaScript 脚本 文件 名 为 game. js, 并 保存 在 js 子 目 录 中 。 在 此 文件 中 需 


要 编写 实现 游戏 各 个 环境 所 需要 的 代码 ,主要 包括 : 创建 画布 (作为 游戏 的 舞台 ) \ 准 备 待 泻 





HTML5 高 级 应 用 案例 


Web 前 端 开 发 技术 实验 与 实践 一 感 TML5、CSS3、JavaScript( 第 3 版 ) 





染 的 图 像 .定义 游戏 对 象 (英雄 ,怪物 )、 处 理 用 户 键 盘 操 作 、 初 始 化 新 一 轮 游戏 的 参数 准备 、 
更 新 游戏 对 象 的 位 置 、 判 断 英 雄 与 怪物 是 否 相 碰 、 绘 制图 像 人 绘制 文本 、 主 循环 函数 和 新 一 
轮 游戏 等 相关 代码 的 设计 ,详细 代码 及 注释 如 下 所 示 : 


/* game. js 英雄 抓 怪物 小 游戏 * / 


// 创 建 canvas, 作 为 游戏 的 舞台 

var canvas = document. createElement("canvas") ; 

var ctx = canvas.getContext("2d"); // 生 成 绘图 环境 

canvas. width = 512; // 设 置 canvas 的 宽度 

canvas. height = 480; // 设 置 canvas 的 高 度 

document. body. appendChild( canvas); // 将 创建 的 canvas 添加 到 body 中 
// 为 背景 图 像 加 载 做 好 准备 


var bgReady = false; 

var bgImage = new Image(); 

bgImage. onload = function () {bgReady = true;}; 
bgImage. src = "images/background. png"; 

// 为 英雄 图 像 加 载 做 好 准备 

Var heroReady = false; 

Var heroImage = new Image(); 

heroImage. onload = function () {heroReady = true;}; 
heroImage. src = "images/hero.png"; 


// 加 载 怪物 图 像 Monster 

var monsterReady = false; // 定 义 怪物 准备 逻辑 量 

var monsterImage = new Image(); // 定 义 怪 物 图 像 

monsterImage. onload = function () {monsterReady = true;}; // 动 态 指 派 事 件 
monsterImage. src = "images/monster.png"; // 给 img 的 src 属性 赋值 


// 定 义 游戏 对 象 (英雄 \ 怪 物 及 统计 次 数 ) 


var hero = { 


speed: 256, // 每 秒 运动 的 像素 ,英雄 需要 移动 
x:0,y:0 

}; 

var monster = {x:0,y:0}; // 定 义 怪物 对 象 ,游戏 中 不 移动 

var monstersCaught = 0; // 存 储 怪物 被 抓 住 的 次 数 

// 处 理 用 户 按键 操作 

var keysDown = {}; // 该 对 象 用 于 保存 用 户 按 下 的 键 值 (keyCode) 


// 增 加 keydown 事件 监听 ,把 用 户 的 输入 先 保 存 下 来 而 不 是 立即 响应 
addEventListener("keydown", function (e) { 
keysDown[e. keyCode] = true; 
}, false); 
// 增 加 keyup 事件 监听 
addEventListener("keyup", function (e) { 
delete keysDown[ e. keyCode]; 
}, false); 
// 当 玩家 抓 住 一 只 怪物 后 复位 ,开始 一 轮 新 游戏 
// 英 雄 图 像 坐标 位 于 canvas 中 心 位 置 上 
var reset = function () { 
hero.x = canvas.width / 2; 
hero.y = canvas. height / 2; 


// 将 怪物 随机 扔 在 屏幕 上 ,重新 生成 怪物 的 坐标 


monster.x = 32 + (Math.random() * (canvas.width — 64)); 
monster.y = 32 + (Math. random() * (canvas.height — 64)); 


}; 
// 更 新 游戏 对 象 
var update = function (modifier) { 
if (38 in keysDown) { 
hero.y -= hero. speed * modifier; 
} 
if (40 in keysDown) { 
hero.y += hero. speed * modifier; 
} 
if (37 in keysDown) { 
hero.x -= hero. speed * modifier; 
} 
if (39 in keysDown) { 
hero.x += hero. speed * modifier; 
} 


// 玩 家 按 住 上 箭头 


// 修 改 英雄 图 像 的 了 坐标 


// 玩 家 按 住 下 箭头 


// 修 改 英雄 图 像 的 了 坐标 


// 玩 家 按 住 左 箭头 


// 修 改 英雄 图 像 的 X 坐 标 


// 玩 家 按 住 右 箭头 


// 修 改 英雄 图 像 的 X 坐 标 


// 英 雄 与 怪物 是 否 碰 到 一 起 要 根据 坐标 来 判断 ,相互 间隔 32 像素 以 内 , 算 相遇 一 次 


证 ( 


hero.x<= (monster.x + 32) && monster.x<= (hero.x + 32) 


&& hero.y <= (monster.y + 32)&& monster.y <= (hero.y + 32) 


3 
++monstersCaught; 
reset(); 


} 


}; 
// 绘 制图 像 所 有 事物 ( 泻 染 事件 ) 
var render = function () { 
证 (bgReady) { 
ctx. drawImage( bgImage, 0, 0); 
} 
if (heroReady) { 


// 累 计 抓 到 的 次 数 


// 背 景 图 像 从 (0,0) 处 开始 绘制 


ctx. drawImage(heroImage，hero.x，hero.y); // 从 指定 位 置 处 开始 绘制 


上 
if (monsterReady) { 


ctx. drawImage( monsterImage, monster.x, monster.y); 


1 

// 显 示 小 妖怪 被 抓 到 的 次 数 

ctx. fillStyle = "rgb(255, 10, 10)"; 
ctx. font = "24px Helvetica"; 

ctx. textAlign = "left"; 

ctx. textBaseline = "top"; 


}; 


// 主 循环 main( ) 函数 游戏 
var main = function () { 
Var now = (new Date()).getTime(); 


Var delta = now — then; 
update(delta / 1000); 
render(); 


// 设 置 填充 样式 
// 设 置 字体 
// 设 置 对 齐 方式 


// 从 指定 位 置 处 开始 绘制 


// 设 置 对 齐 基 准 线 位 置 
ctx. fillText("Goblins caught: " + monstersCaught, 32, 32); 


// 获 取 当 前 时 间 


// 填 充 文本 


// 计 算 两 次 游戏 之 间 的 时 间 差 


// 调 用 更 新 函数 
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then = now; 
// 立即 调用 主 函数 
requestAnimationFrame(main); // 请 求 动画 帧 ,一 种 循环 执行 动画 函数 


; 
// 浏 览 器 兼容 性 处 理 (requestanimationFrame) 
Varw = window; 
requestAnimationFrame = w.requestAnimationFrame | | w.webkitRequestAnimationFrame | | 
Ww. msRequestAnimationFrame | | w.mozRequestAnimationFrame; 


// 开 始 玩 这 个 游戏 

var then = (new Date()).getTime(); // 再 获取 当前 时 间 
reset(); // 泻 染 事物 
main(); 


(5) 保存 并 查看 网 页 
完成 代码 设计 后 ,保存 网 页 文件 。 通 过 浏览 器 查看 页 面 ,分 别 单 击 4 个 方向 键 按 钮 , 检 
查 代 码 所 实现 的 功能 是 否 与 需求 相对 应 ,效果 如 图 1-13-5 所 示 。 


Tl 
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CG |@ 127.0.0.1:8020/ 清 华 社 -规划 笋 材 -实验 教材 第 3 版 资源 及 代 .， QQ 丛 





























图 1-13-5 英雄 抓 怪物 过 程 中 的 状态 效果 图 


注 : 本 项 目 参 照 “How to make a simple HTML5 Canvas game” 改 编 而 成 , 源 代码 可 访 


间 网 站 http://www. lostdecadegames. com/how-to-make-a-simple-html5-canvas-game/ 。 


项 目 38 用 HTMLS 拖 电 开 发 购物 车 


1. 实 训 要 求 
采用 HTML5 拖 电 新 特性 编写 “国内 旅游 线路 选 购 ? 界 面 ,如 图 1-13-6 和 图 1-13-7 所 
示 ,功能 要 求 如 下 : 


EE Tarver 二 = = | 
CC |@ 127.0.0.18020/ 清 舍 社 -规划 各 材 - 交 验 禾 材 第 3 源 次 源 及 SN13/project_13_1.html?_hbt=1502435184118 Qa) 




















长 炒 -张家界 -风电 古城 双 高 6 日 果 | | 张家界 -区 确 本 -天 门 山 -小 戎 履 省 -| | 三 亚 -可 支 洲 -天 演 海 角 5 日 内 | | 时 罗 -大 理 -页 江 一 雪 信 里拉 双飞 8 日 
1000 元 风电 十 坊 双 高 5 日 洲 3000 元 村 
2000 元 4000 元 


























序号 旅游 线路 名 称 




















图 1-13-6 国内 旅游 线路 选 购 初始 页 面 











@ | O 127001.8020/ 丙 华 半 -规划 驶 材 - 交 验 到 村 第 3 版 机 基 及 代码 20170526/ 垃 Wi13/project_13_1 html)_hbt=1502435184118 Qn! | 


国内 跟 团 旅游 线路 选 购 


长 沙 -张家界 -民有 最 十 城 双 高 6 日 游 | | 张家界 - 问 葬 桥 -天 门 山 - 嫩 瑚 析 道 - 时 明 - 大 理 - 大 江 - 徊 必 里 拉 双 必 8 日 
1000 元 凤 怕 二 城 双 高 5 日 旷 3000; 游 


4000 元 





























三 亚 -如 支 州 -天 连 海 角 5 日 游 
辟 明 -大理 -丽江 一 埋 格 里 拉 双 飞 8 日 游 


昆明 -大 尘 - 丽 江 -二 桥 时 拉 双 飞 8 日 
游 





4000 元 














图 1-13-7 选 购 国内 旅游 线路 后 的 页 面 


(1) 4 条 旅游 线路 信息 如 下 : 景点 图 像 名 为 ly_01_zhangjiajie. jpg、 线 路 名 称 为 “长 沙 
张家界 一 凤凰 古城 双 高 6 日 游 ” 线 路 单价 1000 元 ; 景点 图 像 名 为 ly_02_zhangjiajie. jpg、 线 
路 名 称 为 "张家界 一 玻璃 桥 一 天 门 山 一 玻璃 栈道 一 凤凰 古城 双 高 6 日 游 ”线路 单价 2000 元 ， | 实 
景点 图 像 名 为 ly_03_sanya. jpg、 线 路 名 称 为 “三 亚 一 蝇 支 洲 一 天 涯 海 角 5 日 游人 3000 元 ; | 神 
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景点 图 像 名 为 ly_04_kuenming. jpg、 线 路 名 称 为 “昆明 一 大 理 一 丽江 一 香格里拉 双飞 8 日 


游 ”、4000 元 。 如 图 1-13-6 所 示 。 


(2) 将 景点 介绍 以 列表 项 的 形式 水 平 排列 , 当 用 户 选 择 并 拖 忠 时 ,能 够 拖 到 下 面 的 图 层 
div 中 , 按 顺 序 显 示 序 号 ,线路 名 称 、 数 量 、 报 价 , 同 时 能 够 根据 用 户 选 购 线 路 的 单价 和 数量 
自动 进行 汇总 计算 ,并 显示 在 线路 的 最 下 方 。 如 果 用 户 重 复 选择 ( 拖 忠 ) 某 一 线路 ,程序 能 够 
自动 识别 ,并 且 不 新 增 旅游 线路 ,只 是 增加 旅游 线路 参加 和 人数 的 数量 和 线路 报价 小 计 , 重 新 


计算 总 价 ,页 面 效 果 如 图 1-13-7 所 示 。 
2. 实 训 内 容 
(1) HTML5 拖 电 新 特性 的 应 用 。 
(2) JavaScript 函数 的 定义 与 使 用 。 
(3) DOM 节点 访问 操作 。 
(4) 动态 分 派对 象 事件 句柄 。 
(5) 学 会 使 用 dataTransfer 对 象 来 设置 和 获取 数据 。 
(6) 学 会 使 用 拖 忠 事件 (dragstart、drop 等 ) 编 写 简单 的 应 用 程序 。 
3. 实 训 所 需 知 识 点 
(1) 脚本 script 标记 


< script type = "text/javascript" src = ""></script> 
(2) 样式 style 标记 


< style type = "text/css"> 


pftext -align: center;clear: both; } /* 保 证 每 个 段落 必须 另 起 一 行 * / 


</style> 


(3) 无 序列 表 ul 标记 


<ul> 
<1idraggable= "true"> 
<img src= "ly 01_zhangjiajie. jpg"> 
<p> 长 沙 一 张家界 一 凤凰 古城 双 高 6 日 游 </p> 
<p>1000 元 </p> 
</li> 
</ul> 


(4) 图 层 div 标记 


<div id= "div1"> 


<p>< span class = "boxl"></span> < span class = "box2"></span>…</p> 


</div> 


(5) 预 格式 化 pre 标记 


<Ppre> 旅 游 线 路 名 称 数量 报价 </pre> 


(6) 标题 字 h3 标记 
<h3 > 客户 选 购 旅游 线路 </h3 > 


(7) HTML5 拖 忠 基础 知识 
| 设置 元 素 draggable 属性 为 true 允许 拖 电 。 


<1i draggable= "true"> 
< img src= "1Y_02_zhangjiajie. jpg"> 
<p> 张 家 界 一 玻璃 桥 一 天 门 山 一 玻璃 栈道 一 凤凰 古城 双 高 6 日 游 </p> 
<p>2000 元 </p> 

</1i> 





@ 设置 拖 电 事件 


var odiv = document. getElementById( 'div1'); // 获 取 页 面 上 图 层 divl 
// 动 态 给 图 层 分 派 ondragover 事件 句柄 ,并 绑 定 处 理 函 数 
odiv. ondragover = function(ev) {ev.preventDefault();} 


// 循 环 给 所 有 列表 项 添加 ondragstart 事件 句柄 


for(var i = 0; i<ali.length; i++) { 
ali[i].ondragstart = function(ev) { // 通 过 dataTransfer 对 象 的 setData( ) 保 存 数据 
var ap = this.getElementsByTagName( 'p'); // 取 列表 中 所 有 段落 
ev. dataTransfer. setData( 'title', ap[0]. innerHTML); // 将 取出 的 线路 名 称 存 人 
ev. dataTransfer. setData( 'money', ap[1]. innerHTML); // 将 取出 的 线路 单价 存 人 
ev. dataTransfer, setDragImage(this, 0, 0); // 默 认 拖 电 图 像 
} 
} 
// 动 态 给 图 层 分 派 事件 句柄 ,并 绑 定 处 理 函 数 
//odiv. 事 件 句柄 ,并 绑 定 处 理 函 数 
odiv. ondrop = function(ev) { // 放 置 时 操作 
ev. preventDefault( ); // 阻 止 默认 行为 
var stitle = ev. dataTransfer. getData( 'title'); // 取 出 线路 名 称 
var smoney = ev.dataTransfer. getData( 'money'); // 取 出 线路 单价 
//p: -- 序 号 -- 线路 名 称 -一 : 单价 
if(!obj[stitle]) { 
var op = document. createElement( 'p'); // 创 建 一 个 p 
var ospan = document. createElement('span'); // 创 建 第 1 个 span, 显示 序号 
ospan. className = 'box0'; // 注 释 同 上 
ospan. innerHTML = '<h4>'+ (wayno+1)+'.</h4>'; 
op. appendChild(ospan); 
var ospan = document. createElement('span'); // 创 建 第 2 个 span 
ospan. className = 'box2'; // 注 释 同 上 
ospan. innerHTML = stitle; 
op. appendChild(ospan); 
var ospan = document. createElement('span'); // 创 建 第 3 个 span 
ospan. className = 'boxl'; // 设 置 span 的 类 名 为 boxl 
ospan. innerHTML = 1; // 设 置 内 容 为 1, 这 是 数量 ps 
op. appendChild(ospan); // 将 span 添加 到 p 中 六 
var ospan = document. createElement('span'); // 创 建 第 4 个 span 3 
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ospan. className = 'box3'; 
Ospan. innerHTML = smoney; 


op. appendChild(ospan); // 将 第 43 个 span 添加 到 p 中 
odiv. appendChild(op); // 将 p 添 加 到 div 中 
obj[stitle] = 1; 
Waynot+; 

} else { // 重 复线 路 只 修改 数量 及 价格 
Var boxl document. getElementsByClassName( 'box1'); 


Var box2 document. getElementsByClassName( 'box2'); 
for(var i = 0; i< box2.length; i++) { 
if(box2[i]. innerHTML == stitle) { 
box1[i]. innerHTML = parseInt(boxl[i].innerHTML) + 1; 
} 
} 
} 
// 创 建 一 个 div, 存放 计算 线路 总 价 
if(!allMoney) { 
allMoney = document. createElement('div');  // 创 建 div 对 象 
allMoney. id = 'allMoney’; 
| 
inum += parseInt(smoney); // 解 析 为 整数 
allMoney. innerHTML = "总 计 :"+ inum + ' 元 '; 
odiv. appendChild(allMoney); 
} 


4. 实 训 过 程 与 指导 

编程 实现 “国内 旅游 线路 选 购 ”" 页 面 ,具体 步骤 如 下 : 

(1) 文档 结构 的 创建 

@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程序 名 称 为 prj_13_3. html, 格 式 如 下 : 


<U== prjil3 3. nL ==> 


@ 保存 文件 。 输 入 文件 名 为 prj_13_3. html, 选 择 编码 类 型 为 UTF-8, 然 后 保存 文件 。 

(2) 页 面 内 容 设 计 

在 body 标记 中 插入 标题 字 、 水 平分 隔 线 、 图 层 、 无 序列 表 、 段 落 、 图 像 等 标记 。 具 体 步 
又 如 下 : 

@ 在 body 中 插入 1 个 h3, 内 容 为 “国内 跟 团 旅游 线路 选 购 ”。 

@ 在 body 中 插入 hr 标记 ,设置 颜色 为 并 006600。 

@ 插入 第 1 个 div 标记 ,设置 id 为 "div2”, 并 在 其 中 插入 ul 标记 。 

四 在 ul 标记 中 分 别 插入 4 个 列表 项 ,并 为 每 一 个 列表 项 设置 draggable 属性 值 为 
true。 在 每 一 个 列表 项 中 分 别 插入 1 个 图 像 和 2 个 段落 。 具 体 信息 如 下 所 示 : 

a. 景点 图 像 名 分 别 为 ly_01_zhangjiajie. jpg、ly_02_zhangjiajie. jpg、ly_03_sanya. jpg、 
ly_04_kuenming. jpg。 

b. 1 个 段落 内 容 为 景点 名 称 。 景 点 名 称 分 别 为 “长 沙 一 张家界 一 凤凰 古城 双 高 6 日 





游 “ 张 家 界 一 玻璃 桥 一 天 门 山 一 玻璃 栈道 一 凤凰 古城 双 高 6 日 游 “ 三 亚 一 蝇 支 洲 一 天 涯 海 
角 5 日 游 * 昆 明 一 大 理 一 丽江 一 香格里拉 双飞 8 日 游 ”。 

c. 1 个 段落 内 容 为 线路 报价 。 线 路 报价 分 别 为 1000 元 .2000 元 、3000 元 .4000 元 。 

@ 在 body 中 插入 1 个 h3, 内 容 为 “客户 选 购 旅游 线路 ”。 


@ 在 body 中 插入 pre 标记 ,内 容 为 旅游 线路 名 称 、 数 量 、 报 价 ”, 实 际 布局 时 可 以 调整 
它们 之 间 的 间距 。 


@ 在 body 中 插入 div 标记 ,设置 其 id 为 “div1”。 
设计 完成 后 ,保存 并 预览 页 面 效果 ,如 图 1-13-8 所 示 。 
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长 沙 -张家界 - 风 肝 十 因 到 高 6 日 基 
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图 1-13-8 国内 旅游 线路 选 购 未 应 用 样式 时 的 页 面 
(3) 表现 设计 


在 style 标记 中 定义 div、img、ul、hr、p、pre、span 等 标记 的 样式 ,具体 样式 定义 要 求 
如 下 : 


@ 定义 全 局 样式 。 样 式 为 填充 0px、 边 界 0px。 
@ 定义 img 标记 样式 。 样 式 为 宽度 220px、 高 度 180px、 边 界 9px。 


@ 定义 列表 项 li 样式。 样式 为 宽度 245px、 边 界 9px、 边 框 为 1px、\ 实 线 、 颜 色 #333 、 向 
左 浮 动 .列表 样式 类 型 none。 


@ 定义 段落 p 标记 样式 。 样 式 为 文本 水 平 居中 对 齐 、 清 除 左右 浮动 。 


@@ 定义 div 标记 # divl 样式 。 样 式 为 宽度 1200px、 高 度 250px、 边 界 上 下 为 0 .边界 左 
右 自 动 .边框 为 1px、\ 虚 线 型 .颜色 #666666 清除 两 边 浮动 。 


@@ 定义 div 标记 # div2 样式 。 样 式 为 宽度 1200px、 高 度 280px、 边 界 上 下 为 0、 边 界 左 | 芭 
右 自 动 .填充 为 5px\ 水 平 居中 对 齐 ,边框 为 5px、ridge 型 .颜色 并 678966 。 
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@ 定义 span 标记 . box0 样式 。 样 式 为 宽度 16px、 向 左 浮动 .边框 为 1px、 虚 线 型 .颜色 
井 006E38 。 

定义 span 标记 . boxl、. box2、. box3 样式 。 样 式 为 宽度 380px、 底 边框 为 1px、 虚 线 
型 .颜色 并 006E38。 

@ 定义 div 标记 #allMoney 样式 。 样 式 为 右 填充 200px、 向 右 浮 动 。 

四 定义 h3 标记 样式 。 样 式 为 清除 两 边 浮动 ,文本 水 平 居中 对 齐 .字体 大 小 28px。 

@ 定义 pre 标记 样式 。 样 式 为 文本 水 平 居 中 对 齐 、 字 体 大 小 24px。 

(4) 交互 行为 设计 

实现 购物 车 需要 编写 onload() .ondragstart() .ondragover() 、ondrop() 等 函数 ,各 函数 
主要 功能 分 别 如 下 所 示 : 

Q@ 窗 体 装 载 函 数 onload() 


window. onload = function() { // 窗 口 装载 时 ,初始 化 程序 
var odiv = document. getElementById( 'div1'); // 取 对 象 divl, 显示 购物 车 信息 
var ali = document. getElementsByTagName( '1i'); // 取 所 有 列表 项 
var obj = {}; // 定 义 已 经 选 购 的 线路 名 称 
var allMoney = null; // 定 义 总 计 
var inum = 0; // 定 义 存放 总 计 结果 
var wayno = 0; // 显 示 线路 序号 


for(var i = 0; i<ali.length; i++) { 
ali[i].ondragstart = function(ev) { 
var ap = this. getElementsByTagName( 'p'); // 取 列表 中 所 有 段落 
ev. dataTransfer. setData( 'title', ap[0]. innerHTML); // 将 取出 的 线路 名 称 存 人 
ev. dataTransfer. setData( 'money', ap[1]. innerHTML); // 将 取出 的 线路 单价 存 人 
ev. dataTransfer. setDragImage(this, 0, 0); // 默 认 拖 电 图 像 
} 
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@ 拖 动 盘旋 函数 ondragover() 


odiv. ondragover = function(ev) { 
ev. preventDefault(); 
; 


@ 放置 函数 ondrop() 


odiv.ondrop = function(ev) { // 放 置 时 操作 

ev. preventDefault(); 

// 其 余 参见 "3. 实 训 所 需 知识 "中 的 (7)HTML5 拖 上 中 基础 知识 
} 


(5) 保存 并 查看 网 页 
完成 代码 设计 后 ,保存 网 页 文件 。 通 过 浏览 器 查看 页 面 ,分 别 单 击 四 个 方向 键 按钮 , 检 
查 代码 所 实现 的 功能 是 否 与 需求 相对 应 ,效果 如 图 1-13-7 所 示 。 


项 目 39 使 用 Web Worker 做 后 台数 值 (算法 ) 计 算 


1. 实 训 要 求 

工作 线程 最 简单 的 应 用 就 是 用 来 做 后 台 计 算 ,而 这 种 计算 并 不 会 中 断 前 台 用 户 的 操作 。 
用 来 执行 一 个 相对 来 说 比较 复杂 的 任务 : 采用 Web Worker 工作 线程 实现 后 台 计 算 两 个 非 
常 大 的 数字 的 最 小 公 倍数 和 最 大 公约 数 ,页 面 布 局 效果 如 图 1-13-9 所 示 。 
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两 个 大 数 的 最 大 公约 数 和 最 小 公信 数 是 : 


请 等 待 ， 正 在 计算 … 


线程 工作 完成 ! 


两 个 数 分 别 是 : 347734080,3423744400 


中 最 小 公信 数 是 14881907613614400 











图 1-13-9 Web Worker 实现 后 台数 值 计 算 


2. 实 训 内 容 

(1) 创建 Web Worker 对 象 。 

(2) 创建 web worker 文件 。 

(3) 定义 计算 两 个 数 最 小 公 倍 数 和 最 大 公约 数 的 函数 。 
(4) 主线 程 与 工作 线程 之 间 通 信 ( 发 送 和 接收 数据 ) 。 
3. 实 训 所 需 知 识 点 

(1) 图 层 div 标记 


<div></div> 

(2) 图 层 h2 标记 

<h2 > 两 个 大 数 的 最 大 公约 数 和 最 小 公 倍数 是 :</h2 > 
(3) 段落 p 标记 

<p id= "result"> 请 等 待 ,正在 计算 … </p> 

(4) 脚本 script 标记 


< script type = "text/javascript”src = "">…</script> ll 
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(5) 图 像 img 标记 


< img src= "ico 71.gif" width= "76" height = "72" border = "0" alt= ""> 


(6) 工作 线程 原理 
g@ 在 主 程序 页 面 中 ,使 用 Worker() 构 造 函 数 创建 一 个 新 的 工作 线程 , 它 会 返回 一 个 代 
表 此 线程 本 身 的 线程 对 象 。 代 码 如 下 : 


Var worker = new Worker('prj_13 4 worker.js'); 


@ 使 用 这 个 线程 对 象 与 后 台 脚 本 进行 通信 。 线 程 对 象 有 两 个 主要 事件 要 处 理 : 利用 
postMessage() 用 来 向 后 台 脚 本 发 送 消息 ,onmessage 事件 句柄 绑 定 事件 处 理 函 数 用 以 接收 
从 后 台 脚 本 中 传递 过 来 的 消息 。 其 代码 如 下 : 


worker. postMessage( 数 据 ); // 发 送 消息 
worker. onmessage = function(event) {  // 接 收 消息 
// 处 理事 件 代 码 


}; 


4. 实 训 过 程 与 指导 

采用 Web Worker 工作 线程 实现 后 台 计算 两 个 非常 大 的 数字 的 最 小 公 倍数 和 最 大 公约 
数 ,具体 步骤 如 下 : 

(1) 文档 结构 的 创建 

@ 启动 程序 ,创建 HTML 文档 。 启 动 EditPlus 或 HBuilder 等 软件 ,新 建 HTML 网 
页 ,在 首 行 插入 注释 语句 , 注 明 程序 名 称 为 prj_13_4. html, 格 式 如 下 : 


汪汪 一 全 


@ 保存 文件 。 输 入 文件 名 为 prj_13_4. html, 选 择 编码 类 型 为 UTF-8, 然 后 保存 文件 。 

(2) 页 面 内 容 设计 

在 body 标记 中 插入 图 层 、 表 单 、 表 格 、 表 单 控件 、h2、img、 列 表 框 等 标记 ,完成 页 面 布局 
设计 。 

在 body 中 插入 1 个 div。 

@ 在 div 中 插入 h2 标记 ,其 内 容 为 “两 个 大 数 的 最 大 公约 数 和 最 小 公 倍数 是 :”。 

@ 在 div 中 插入 p 标 记 , 其 内 容 为 “请 等 待 ,正在 计算 …”。 同 时 该 段落 作为 计算 结果 显 
示 区 域 。 

(3) 编写 主页 面 内 的 JavaScript 脚本 

在 body 中 插入 script 标记 ,并 在 标记 中 分 别 编写 代码 ,具体 步骤 如 下 : 

@ 创建 一 个 Worker 对 象 ,并 将 参数 “prj_13_4_worker. js” 传 人 该 对 象 。 

@ 定义 一 个 JSON 对 象 ,格式 如 下 : 


var student = {name: " 段 正祥 ",age:30,no:1709012301]} // 作 为 参数 传 给 工作 线程 
var number = { 


first: 347734080, 
second: 3423744400 
}; 


加 将 JSON 对 象 传送 给 工作 线程 。 
外 通过 onmessage 事件 句柄 绑 定 事件 处 理 函 数 ,接收 来 自 工 作 线程 的 数据 ,代码 如 下 : 


worker. onmessage = function(event) { 
// 负 责 将 接收 的 数据 显示 在 主页 面 上 
}; 


(4) 编写 工作 线程 JavaScript 脚本 

在 工作 线程 prj _13_4_ worker. js 中 分 别 编 写 3 个 JavaScript 函数 ,分 别 为 
divisor(first, second) ~、multiple(first, second) .calculate(first, second)。 

@ 在 后 台 工 作 线程 中 ,需要 两 个 JavaScript 函数 : divisor(first, second) 用 来 计算 最 大 
公约 数 ; multiple(first，second) 用 来 计算 最 小 公 倍 数 。 同 时 工作 线程 的 onmessage 事件 处 
理 器 用 以 接收 从 主页 面 中 传递 过 来 的 数值 ,然后 把 这 两 个 数值 传递 到 calculate (first， 
second) 用 来 计算 。 当 计算 完成 后 ,通过 postMessage() 方 法 将 计算 结果 发 送 到 主页 面 。 

@ 在 主页 面 中 创建 一 个 后 台 工 作 线程 ,并 且 向 这 个 工作 线程 分 配 任务 ( 即 传递 两 个 特 
别 大 的 数字 ) , 当 工 作 线 程 执行 完 这 个 任务 时 , 便 向 主页 面 程序 返回 计算 结果 ,而 在 这 个 过 程 
中 ,主页 面 不 需要 等 待 这 个 耗 时 的 操作 ,可 以 继续 进行 其 他 的 行为 或 任务 。 共 为 两 个 主要 部 
分 : 一 个 是 主页 面 ,可 以 包含 主 JavaScript 应 用 入 口 ,用 户 其 他 操作 UI 等。 另外 一 个 是 后 
台 工 作 线 程 脚本 , 即 用 来 执行 计算 任务 ,代码 片段 如 下 : 


/* 程序 名 称 : prj_13_4_worker. js x*/ 


onmessage = function(event) { // 从 主页 面 接收 数据 (任务 ) 
var first = eval(event. data. first); // 取 第 一 个 数 
var second = eval(event. data. second); // 取 第 二 个 数 
calculate(first, second); // 调 用 函数 计算 


}; 
/* 计算 最 小 公 售 数 和 最 大 公约 数 * / 
function calculate(first, second) { // 执 行 计算 工作 
/xvar tl = (new Date()).getTime();*/ 
var common divisor = divisor(first, second); // 调 用 函数 计算 最 大 公约 数 
var common_multiple = multiple(first，second); ”// 调 用 函数 计算 最 小 公 倍数 
/xvar t2= (new Date()).getTime();*/ 
postMessage( "< h2 > 线程 工作 完成 !</h2 >< br >”+ "两 个 数 分 别 是 : " + first + "," + 
second + "<br>" +" 最 大 公约 数 是 ”+ common_divisor + "< br > 最 小 公 倍 数 是 ”+ common_ 
multiple); 
} 
/x 关 
* 计算 最 大 公约 数 
参数 1: number 


x# 参数 2: number 实 
* 返回 值 ll 
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*/ 
function divisor(a, b) { // 递 归 
if(a % b == 0)1{ 
return b; 
} else{ 
return divisor(b, a % b); 
Bb 
} 
/x 关 
* 计算 最 小 公 倍数 
x 参数 1 number 
x 参数 2 number 
* 返回 值 
*/ 
function multiple(a, b) { 
var multiple = 0; 
multiple = a * b/ divisor(a, b); 
return multiple; 


(5) 保存 并 查看 网 页 
完成 代码 设计 后 ,保存 网 页 文件 ,通过 浏览 器 查看 页 面 效果 。 


课外 拓展 训练 13 


1. 采用 HTML5 拖 忠 新 特性 编写 “ 女 式 服装 选 购 购物 车 ”, 如 图 1-13-10 和 图 1-13-11 
所 示 。 功 能 要 求 如 下 : 

(1) 7 款 女 式 服装 : 服装 图 像 名 为 taobao13_3_1. jpg、 服 装 名 称 为 “V 领 短视 工 恤 女 修 
身 纯 白 ”、 服 装 价格 为 69. 00 元 ; 服装 图 像 名 为 taobao13_3_2. jpg、 服 装 名 称 为 *V 领 宽 松 纯 
棉 打 底 衫 ”服装 价格 为 35. 00 元 ; 服装 图 像 名 为 taobao13_3_3. jpg、 服 装 名 称 为 “ 红 饿 原创 
港 风 女 夏装 上 衣 ” 服 装 价格 为 79. 00 元 ; 服装 图 像 名 为 taobao13_3_4. jpg、 服 装 名 称 为 “ 韩 
国 新 款 圆 领 纯色 短 袖 工 恤 ”服装 价格 为 59. 50 元 ; 服装 图 像 名 为 taobao13_3_5. jpg、 服 装 
名 称 为 “V 领 双 面 精 梳 丝光 棉 ”、 服 装 价格 为 145. 70 元 ; 服装 图 像 名 为 taobao13_3_6. jpg、 服 装 
名 称 为 “丝光 棉 体 恤 半 袖 百 搭 修身 ”服装 价格 为 39. 99 元 ; 服装 图 像 名 为 taobao13_3_7. jpg、 
服装 名 称 为 “中 长 款 女 式 简约 开 又 工作 ”服装 价格 为 49. 00 元 ,如 图 1-13-10 所 示 。 

(2) 将 服装 展示 以 列表 项 的 形式 水 平 排列 在 一 个 section 中 , 当 用 户 选择 服装 名 称 并 拖 
忠 时 ,能 够 拖 到 上 面 一 个 section 中 , 按 顺 序 显 示 服 装 名 称 、 缩 小 版 图 像 (30px * 30px) 、 数 
量 、 小 计价 格 ,同时 能 够 根据 用 户 选 购 服 装 的 件数 和 单价 自动 进行 汇总 计算 ,并 显示 在 
section 下 面 的 span 标记 中 。 如 果 用 户 重 复 选择 ( 拖 忠 ) 某 一 服装 ,程序 能 够 自动 识别 ,并 且 
不 新 增 同样 的 服装 ,只 是 增加 选 购 服 装 的 数量 和 小 计价 格 ,同时 重新 计算 总 价 ,页 面 效果 如 
图 1-13-11 所 示 。 

(3)“ 清 空 我 的 购物 车 ”按钮 的 功能 是 将 section 中 无 序列 表 中 的 列表 项 全 部 清空 ,同时 
将 section 标记 下 面 的 span 标记 中 的 总 计 置 为 “0.0”。 
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图 1-13-10 ” 女 式 服装 选 购 购物 车 页 面 
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图 1-13-11 女 式 服装 选 购 中 购物 车 页 面 


(4) 程序 名 称 为 project_13_1. html。 

注 : 此 项 目 参 考 ( 一 步 步 教 你 如 何 用 HTML 5 拖 役 功能 打造 购物 车 )( 雇 煜 嵘 译 ) 内容 
改编 而 成 , 源 代码 网 址 为 http://developer. 51cto. com/art/201309/410668_2. htm。 

2. 采用 Web Worker 多 线程 技术 实现 查找 用 户 输入 大 于 或 等 于 1000 以 内 的 能 同时 被 
13 和 17 整除 的 所 有 整数 ,并 将 结果 显示 在 多 行文 本 框 中 ,初始 页 面 如 图 1-13-12 所 示 , 单 击 
“启动 找 数 ”按钮 后 的 页 面 效 果 如 图 1-13-13 所 示 。 要 求 如 下 : 

(1) 主线 程 设计 。 按 图 1-13-12 所 示 的 页 面 效果 完成 页 面 布 局 。 界 面 要 求 : 输入 整数 
文本 框 要 求 设置 占 位 符 , 其 信息 为 “输入 大 于 1000 的 整数 ”; 且 内 容 不 能 为 空 ;“ 启 动 找 数 ” 
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图 1-13-13 工作 线程 完成 找 数 结果 页 面 


按钮 的 功能 : 先 检查 输入 整数 是 否 大 于 或 等 于 1000 ,否则 提示 报错 ,如 图 1-13-14 所 示 。 满 
足 要 求 时 , 则 将 用 户 输入 的 整数 传递 给 工作 线程 ,然后 工作 线程 接收 信息 ,并 根据 接收 的 数 
据 , 通 过 循环 找 出 满足 条 件 的 所 有 整数 ,并 存放 在 数组 中 ,然后 再 将 计算 结果 回 传 给 主线 程 ， 
主线 程 接收 数据 后 ,显示 在 多 行文 本 框 中 。 
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图 1-13-14 输入 数据 不 符合 要 求 时 的 错误 对 话 框 
(2)“ 停 止 找 数 ” 按 钮 功能 : 将 工作 线程 序 终止 ,并 释放 其 占用 的 内 存 空 间 。 
(3) 程序 名 称 为 project_13_2. html。 
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第 五 部 分 
网 站 设计 





“Web 前 端 开发 技术 ”课程 设计 





1. 设计 目的 

“Web 前 端 开 发 技术 ”课程 设计 是 软件 工程 .计算 机 科学 与 技术 以 及 相关 专业 一 个 非常 
重要 的 实践 性 教学 环节 ,是 学 生 学 习 过 “Web 前 端 开发 技术 ”课程 后 必须 进行 的 一 次 综合 性 
的 开发 训练 。 课 程 设计 宗 旨 是 使 学 生 加 深 对 HTML5、CSS3、JavaScript 三 大 Web 前 端 开 
发 技术 的 理解 与 运用 ,掌握 常用 的 Web 前 端 开发 工具 和 主流 网 络 浏 览 工具 ,利用 三 大 主流 
技术 解决 Web 前 端 开 发 中 的 一 些 实际 工程 问题 ,提高 学 生 Web 前 端 开发 的 能 力 。 

2. 设计 要 求 

(1) 界面 设计 

根据 网 站 功能 的 分 析 ,确定 使 用 页 面 布局 技术 (表格 .框架 .DIV 十 CSS 或 者 混合 使 用 ) 
进行 页 面 设计 ,使 网 站 功能 齐全 ,界面 美观 大 方 ,有 一 定 的 交互 性 。 

(2) 关键 技术 

明确 使 用 哪些 关键 技术 来 解决 实际 问题 ,如 CSS3、DIV、CSS MENU jQuery、 
BootStrap 等 第 三 方 插件 技术 等 。 

(3) 代码 设计 

在 编写 代码 时 必须 对 HTML5、CSS3 ,JavaScript 等 部 分 代码 进行 必要 注释 ,以 提高 程 
序 的 可 读 性 ; 同时 代码 采用 锯齿 结构 (向 右 缩 进 方式 ) ,保持 代码 结构 清晰 ; 设计 的 网 站 中 
涉及 表单 部 分 均 需 要 对 表单 的 输入 项 进行 必要 的 有 效 性 验证 。 

(4) 选 题 要 求 

学 生 自 愿 选 题 ,每 2 一 3 名 学 生 为 1 组 , 设 组 长 1 名 ,负责 组 内 任务 分 工 并 组 织 交流 与 讨 
论 , 确 保 每 名 组 员 均 有 实际 编程 任务 ,各 司 其 职 ,1 周 内 共同 完成 课程 设计 任务 。 

(5) 代码 量 要 求 

每 组 提交 网 站 总 代码 量 必须 达到 10 000 行 以 上 ,人 均 达 到 3333 行 以 上 。 

(6) 答辩 与 报告 要 求 

每 组 学 生 各 自 提交 一 个 可 以 实际 运行 的 网 站 系统 和 课程 设计 报告 。 课 程 设计 报告 的 封 
面 参照 实验 报告 模板 ,正文 部 分 不 少 于 4000 字 ,内容 包 括 网 站 功能 分 析 、 网 站 布局 设计 、 网 
站 开发 采用 的 关键 技术 、 开 发 工具 简介 、 网 站 实现 等 ,代码 必须 全 部 提交 。 

3. 设计 案例 

以 高 校 (北京 理工 大 学 ) .企业 (同方 股份 有 限 公司 )、 社 会 团体 (成 都 市 互联 网 协会 ) 网 站 
为 例 介绍 Web 网 站 设计 与 开发 。 重 点 讲解 网 站 设计 与 开发 中 常用 的 页 面 布局 技术 和 导航 
菜单 设计 技术 。 通 过 三 个 典型 案例 的 详细 分 析 与 讲授 ,学 生 能 够 熟练 使 用 各 种 Web 前 端 开 
发 工具 ,掌握 设计 和 开发 常用 的 中 小 型 网 站 的 基本 方法 与 技能 ,经 过 自身 的 努力 与 实践 能 够 
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胜任 Web 前 端 开 发 相关 的 工作 。 
任务 1 高 校 网 站 设计 一 一 北京 理工 大 学 网 站 
1. 任务 概述 
任务 要 求 运用 DIV 十 CSS 十 JavaScript 十 jQuery 完成 北京 理工 大 学 网 站 (http://www. 


bit. edu. cn/) 首 页 的 设计 ,页 面 效 果 如 图 2-1-1 所 示 。 
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图 2-1-1 北京 理工 大 学 网 站 首页 


从 页 面 布局 设计 、 内 容 编 排 , 表 现 设 计 、 交 互 与 动态 效果 设计 等 多 个 方面 完成 高 校 网 站 
设计 。 企 业 网 站 首页 中 主要 包含 下 拉 二 级 导航 菜单 、 搜 索 栏 .jQuery 旋转 轮 播 式 插件 
CarouFredSel .Tab 选项 卡 等 表现 形式 。 

2. 任务 实施 

(1) 页 面 布局 设计 

根据 图 2-1-1 所 示 的 页 面 效 果 , 设 计 网 站 首页 的 DIV 结构 ,如 图 2-1-2 所 示 。 

(2) 内 容 编 排 

根据 图 2-1-2 所 示 的 DIV 分 区 图 ,分 别 设计 每 一 个 分 区 内 容 、 表 现 及 互动 效果 。 
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图 2-1-2 网 站 首页 DIV 分 区 图 


Q@ 头 部 设计 。 

头 部 包含 Logo 和 顶部 导航 链接 两 部 分 ,由 5 个 图 层 构 成 ,其 中 中 间 3 个 图 层 分 别 插入 
Logo 链接. 中 英文 页 面 等 。 图 层 设置 float 属性 ,分 别 向 左 、 向 右 浮动 排列 。 

类 名 称 为 . top_link 的 图 层 中 ,有 4 个 链接 , 当 鼠 标 盘旋 时 ,出 现 上 下 翻滚 背景 图 的 效 
果 。 这 是 通过 CSS 变换 超 链 接 和 盘旋 超 链接 的 背景 图 像 的 样式 来 实现 的 。 每 幅 背 景 图 像 
由 两 个 相近 的 色 块 构成 ,如 图 2-1-3 所 示 。 


图 2-1-3 ”顶部 超 链 接 背景 图 像 


默认 超 链 接 将 背景 设置 为 不 重复 、 居 左上 部 ,盘旋 超 链接 设置 背景 图 像 为 不 重复 、 居 左 
底部 ,这 样 来 形成 上 下 翻滚 的 效果 ,代码 如 下 所 示 : 


< 二 头 部 开始 一 > 
<div class = "header"> 
<div class = "top"> 
<div class= "logo"> 
<a href = "index. html"> 
< img src = "images/1ogo. jpg" width= "273" height = "63"/></a> 
</div> 
<div class= "top_link"> 
<div class= "sfdr" id= "menul"> 
<ul> 
<1li class = "abgl"><a href = "dhw/zxs/index. htm"> 在 校生 </a></1i> 
<1i class= "abg2"><a href = "dhw/jzg/index. htm"> 教 职工 </a></1i> 
<1liclass= "abg3"><a href = "dhw/ks/index. htm"> 考 生 </a></1i> 
<1l1iclass= "abg4"><a href = "dhw/dhxy/index. htm"> 校 友 </a></1i> 
</ul> 
</div> 
<div class = "ya"> 
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<a href = "index. htm"> 中 文 版 </a> | <a href = "http://english. bit. edu. cn/" target = 
"_blank"> ENGLISH </a> |<a href = "http://xxgk. bit. edu. cn/" target ="_blank" style = "color: 
间 FF0000"> 信 息 公开 </a> 
</div> 
</div> 
</div> 


< 和 > 


顶部 菜单 具有 背景 图 像 翻转 效果 ,需要 调用 两 个 外 部 JS 文件 jquery-1. 12. 0.js( 最 新 版 
本 ) 和 menuli. js。 调 用 格式 如 下 : 


< script src="js/jquery— 1.12.0.js" type= "text/javascript"></script > 
< script src = "js/menuli. js" type = "text/javascript"></script > 


外 部 menuli. js 采用 jQuery 编程 实现 ,代码 如 下 所 示 : 


// JavaScript Document 
/* menuli.js */ 
$ (document). ready(function() { /* 定义 jQuery 函数 jqsxfg5lnav * / 
jQuery. jqsxfg5lnav = function(jqsxfg5lnavhover) { 
$ (jqsxfg51navhover). prepend("< span ></span >"); 
$ (jqsxfg51navhover) .each(function() { 
var linkText = $ (this).find("a").html(); 
$ (this).find("span"). show().html(linkText); 
}); 


$ (jqsxfg51navhover). hover(function() { 
$ (this). find("span"). stop().animate({ 
marginTop: "一 26" 
}, 250); 
}, function() { 
$ (this). find("span"). stop().animate({ 
marginTop: "0" 
}, 250); 
D); 
}; 
// 下 面 是 调用 方法 ,一 个 页 面 也 可 以 调用 很 多 次 
$ .jqsxfg5lnav("#menul 1i"); 
D); 


@ JavaScript 导航 菜单 设计 

导航 菜单 由 二 级 下 拉 菜 单 构 成 。 一 级 菜单 水 平 排列 ,主要 有 : 学 校 概况 、 党 群 工 作 、 人 
才 培 养 .科学 研究 、 师 资 队 伍 、 学 生 工 作 、 招 生 就 业 、 国 际 交流 。 二 级 菜单 有 下 拉 菜 单 ,如 将 鼠 
标 盘 旋 在 “学 校 概况 ”上 时 弹出 下 拉 菜 单 , 如 图 2-1-4 所 示 。 

采用 JavaScript 技术 实现 二 级 导航 菜单 。 一 级 菜单 采用 无 序列 表 方 式 呈现 ,二 级 菜单 
采用 定义 列表 方式 呈现 (省 略 dt 标记 , 仅 用 dd 标记 ) .并且 将 定义 列表 嵌 套 在 列表 项 1i 标记 
中 。 给 每 一 个 li 标记 ( 即 一 级 导航 菜单 ) 指 派 onMouseOver、onMouseOut 事件 句柄 ,并 绑 定 
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图 2-1-4 二 级 菜单 效果 图 


事件 处 理 函数 ,实现 当 鼠 标 在 导航 菜单 上 盘旋 时 显示 二 级 子 菜 单 displaySubMenu(this) , 当 
鼠标 移 开 导航 菜单 时 隐藏 二 级 子 菜单 hideSubMenu(this) 。 两 个 JavaScript 函数 定义 分 别 
如 下 : 


function displaySubMenu(1i){ 
var subMenu = 1i.getElementsBYTagName("dl")[0]; // 获 取 列 表 项 中 所 含 定 义 列表 
subMenu. style. display = "block"; // 设 置 列表 样式 的 display 属性 为 块 ,显示 子 菜单 
} 
function hideSubMenu(1i){ 
var subMenu = 1i.getElementsByTagName("dl")[0]; ”// 获 取 列 表 项 中 所 含 的 定义 列表 
subMenu. style. display = "none"; // 设 置 列表 样式 的 display 属性 为 none, 隐藏 子 菜单 
} 


二 级 导航 菜单 代码 如 下 所 示 : 


<div class = "nav"> 

<ul> 

<1i onmouseover = "displaySubMenu(this)" onmouseout = "hideSubMenu(this)"> 
<a href = "gbxxgk/gbxqzl/index. htm"> 学 校 概况 </a> 

<dl> 

<dd><a href = gbxxgk/gbxqzl/index. htm > 校 情 纵览 </a></dd> 

<dd><a href = gbxxgk/xxzc/index. htm> 学 校 章程 </a></dd> 

<dd><a href = gbxxgk/gblsyg/index.htm> 历 史 沿 革 </a></dd> 

<dd><a href = gbxxgk/gbxxld/index. htm> 学 校 领导 </a></dd> 

<dd><a href = gbxxgk/gbgljg/index. htm > 管理 机 构 </a></dd> 

<dd><a href = gbxxgk/gbxysz2/index. htm > 学 院 设置 </a></dd> 

<dd><a href = gbxxgk/xxgk2/index. htm> 信 息 公开 </a></dd> 

<dd><a href = http://www. bit. edu. cn/gbxxgk/gbxqzl/gbjswh/index. htm > 大 学 文化 </a></dd> 
<dd><a href = gbxxgk/gbxydy/index. htm > 校园 导游 </a></dd> 

</dl> 

</1i> 

< 1i onmouseover = "displaySubMenu(this)" onmouseout = "hideSubMenu(this)"> 
<a href = "gbdqgz/index. htm"> 党 群 工作 </a> 

<dl> 

<dd><a href = http://www. bit. edu. cn/gbxxgk/gbgljg/zzb/ > 党 建 动态 </a></dd> 


“Web 前 端 开 发 项 枯 ”课程 证 寺 





Web 前 端 开 发 投 太 实验 与 实践 一 - 感 TML5.CSS3、JavaScript( 禹 3 版) 





<dd><a href = http://jwjc.bit. edu. cn/ > 反腐 倡 廉 </a></dd> 

<dd><a href = http://gonghui. bit. edu. cn/ target = "_ blank"> 工 会 教代 会 </a></dd> 

<dd><a href = http://ccyl. bit. edu. cn/ target = " blank"> 共 青 在 线 </a></dd> 

<dd><a href = http://su. bit. edu. cn/ target = "_blank"> 学 生 会 </a></dd> 

<dd><a href = http://ccyl. bit. edu. cn target = " blank"> 研 究 生 会 </a></dd> 

<dd><a href = http://assn. bit. edu. cn/ target = " blank"> 北 理 社 联 </a></dd> 

</dl> 

</li> 

<1i onmouseover = "displaySubMenu(this)" onmouseout = "hideSubMenu(this)"> 

<a href = "gbrcpy/index. htm"> 人 才 培 养 </a> 

<dl> 

<dd><a href = http://wuw. bit. edu. cn/gbxxgk/gbgljg/jwc/index. htm > 本 科 生 教育 </a></dd> 
<dd><a href = http://grd. bit. edu. cn/ target = "_blank"> 研 究 生 教育 </a></dd> 

<dd><a href = http://www. bit. edu. cn/gbrcpy/gbsyjxsfzx/ > 实验 教学 示范 中 心 </a></dd> 
<dd><a href = http://abroad. bit. edu. cn/ target = ”blank"> 本 科 生 国际 交流 </a></dd> 
<dd><a href = http://isc. bit. edu. cn/ target = " blank"> 留 学 生 教 育 </a></dd> 

<dd><a href = http://www. hotcbit. org/ target = "_ blank"> 高 职 教育 </a></dd> 

<dd><a href = http://sice.bit.edu. cn/ target ="_blank"> 国 际 教育 </a></dd> 

<dd><a href = http://sce. bit. edu. cn/sce/ target = "_blank"> 继 续 教育 </a></dd> 

<dd><a href = http://learn. bit. edu. cn/ target = "_ blank"> 远 程 教育 </a></dd> 

<dd><a href = http://www. bitqfx. com target = "blank"> 民 族 预 科教 育 </a></dd> 

</dl> 

</1i> 

<1i onmouseover = "displaySubMenu(this)" onmouseout = "hideSubMenu(this)"> 

<a href = "gbkxyj/index. htm"> 科 学 研究 </a> 

<dl> 

<dd><a href = http://kjc. bit. edu. cn/index. htm target = "_blank"> 科 研 管理 </a></dd> 
<dd><a href = http://kjc. bit. edu. cn/kydw/index. htm target = "_blank"> 科 研 队伍 </a></dd> 
<dd><a href = http://kjc. bit. edu. cn/kjpt/gjjzdsyszx/index. htm target = "_blank"> 科 研 平台 
</a></dd> 

<dd><a href = http://kjc. bit. edu. cn/kjhz/kjcg/index. htm target = "_blank"> 科 研 合作 </a></dd> 
<dd><a href = http://www. bit. edu. cn/gbkxyj/gbxzjg/ > 学 术 机 构 </a></dd> 

<dd><a href = http://www. bit. edu. cn/gbkxyj/gbxkjs/ > 学 科 建 设 </a></dd> 

<dd><a href = http://journal. bit. edu. cn/gqkw/ch/index. aspx target = " blank"> 学 术 期 刊 </a> 
</dd> 

<dd><a href = http://www. bit. edu. cn/ggfw/tzgg17/jzyg2/index. htm target = "_blank"> 学 术 活 动 
</a></dd> 

<dd><a href = http://www. bit. edu. cn/gbkxyj/gbkjcy/ > 科技 产业 </a></dd> 

<dd><a href = http://www. bit. edu. cn/gbkxyj/xtcx/ style = "color: # FF0000"> 协 同 创新 </a> 
</dd> 

</dl> 

</li> 

<1i onmouseover = "displaySubMenu(this)" onmouseout = "hideSubMenu(this)"> 

<a href = "gbszdw/index. htm"> 师 资 队伍 </a> 

<dl> 

<dd><a href = http://renshichu. bit. edu. cn/mxms/1lyys/index. htm target = "_blank"> 两 院 院 士 
</a></dd> 

<dd><a href = http://renshichu. bit. edu. cn/mxms/gjqrjh/index. htm target = "_blank"> 国 家 千 人 
计划 </a></dd> 





<dd>< a href = http://renshichu. bit. edu. cn/mxms/cjxz/index. htm target =" blank"> 长 江 学 者 
</a></dd> 

<dd><a href = http://renshichu. bit. edu. cn/mxms/jcrc/index. htm target = "_blank"> 杰 出 人 才 
</a></dd> 

<dd><a href = http://renshichu. bit. edu. cn/mxms/jxms/index. htm target = "blank"> 教 学 名 师 
</a></dd> 

<dd><a href = http://renshichu. bit. edu. cn/zpxx/index. htm target =" blank"> 人 才 招 聘 </a> 
</dd> 

</dl> 

</1i> 

< 1i onmouseover = "displaySubMenu(this)" onmouseout = "hideSubMenu(this)"> 

<a href = "gbxsgz/index. htm"> 学 生 工 作 </a> 

<dl> 

<dd><a href = http://century. bit. edu. cn/StudentWork/xgdt/NewsList.aspx target ="_blank"> 学 
工 动态 </a></dd> 

<dd><a href = http://century. bit. edu. cn/StudentWork/xsdj/index. html target = " blank"> 学 生 
党 建 </a></dd> 

<dd><a href = http://century. bit. edu. cn/StudentWork/xljk/index. html target = "_blank"> 心 理 
健康 </a></dd> 

<dd><a href = http://century. bit. edu. cn/StudentWork/xszz/index. html target = "_blank"> 学 生 
资助 </a></dd> 

<dd><a href = http://century. bit. edu. cn/StudentWork/tsgz/index1. html target = "_blank"> 特 色 
工作 </a></dd> 

</dl> 

</1i> 

< 1i onmouseover = "displaySubMenu(this)" onmouseout = "hideSubMenu(this)"> 

<a href = "gbzsjy/index. htm"> 招 生 就 业 </a> 

<dl> 

<dd><a href = http://admission. bit. edu. cn target ="_blank">< font color = red > 本 科 生 招生 
</font></a></dd> 

<dd><a href = http://grd. bit. edu. cn/zsgz/index. htm target = " blank"> 研 究 生 招生 </a></dd> 
<dd><a href = http://job. bit. edu. cn/main. html target = "blank"> 毕 业 生 就 业 </a></dd> 
<dd><a href = http://isc. bit. edu. cn/ target = " blank"> 留 学 生 招 生 </a></dd> 

<dd><a href = http://grd. bit. edu. cn/zsgz/gatzs/index. htm target = ”blank"> 港 澳 台 招生 </a> 
</dd> 

<dd><a href = http://sice. bit. edu. cn/ target = "_blank"> 国 际 教育 招生 </a></dd> 

< dd>< a href = http://sce. bit. edu. cn/scenew/news_parent. asp? id = 51&bcom_id = 10 target = 
"_blank"> 继 续 教育 招生 </a></dd> 

<dd><a href = http://learn. bit. edu. cn/ target = "_blank"> 远 程 教育 招生 </a></dd> 

<dd><a href = http://www. hotcbit. org/ target = "_blank"> 高 等 职业 教育 招生 </a></dd> 
<dd><a href = http://zhaosheng. zhbit. com/ target = "_blank"> 珠 海 学 院 招生 </a></dd> 
<dd><a href = http://www. bitsqa. com > SOR- HND 招生 </a></dd> 

</dl> 

</1i> 

<1i onmouseover = "displaySubMenu(this)" onmouseout = "hideSubMenu(this)"> 

<a href = "gbgjjl/index. htm"> 国 际 交流 </a> 

<dl> 

<dd><a href = http://international. bit. edu. cn/ > 交流 动态 </a></dd> 

<dd><a href = http://www. bit. edu. cn/ggfw/tzgg17/wsjl/index. htm target = "_blank"> 工 作 通知 
</a></dd> 
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<dd><a href = http://www. bit. edu. cn/gbxxgk/gbgljg/gjjlhzc/ > 管理 机 构 </a></dd> 
<dd><a href = http://www. bit. edu. cn/gbgjjl/gbxsjl/ > 学 生 交 流 </a></dd> 
<dd><a href = http://isc. bit. edu. cn/ target = ”blank"> 留 学 生 中 心 </a></dd> 
<dd><a href = http://sice. bit. edu. cn/ target = " blank"> 合 作 办 学 </a></dd> 

</dl > 

</1i> 

</ul> 

</div> 


<H 一 于 航 结 求 > 


加 搜索 栏 设计 

为 了 便于 网 站 访问 者 检索 信息 ,一 般 网 站 首页 都 会 设计 搜索 栏 。 搜 索 框 内 默认 值 为 “站 
内 搜索 ”, 获 得 焦点 时 自动 清空 ,失去 焦点 时 ,车 无 内 容 则 自动 赋值 为 默认 值 。 其 实现 代码 
如 下 : 


<div class = "sea box"> 

< form action = "http://search. bit. edu. cn/search/search" name = "dataForm" class = "search" 
target ="_blank" method= "post" onsubmit = "document. charset = 'gbk';" accept ~ charset = "gbk"> 

< input name = "colls" value = "1" type = "hidden" /> 

< input name = "collId" value = "1" type = "hidden" /> 

< input name = "maxresults" size= "4" value= "10" type = "hidden" /> 

< input class = "notxt" value = "站 内 搜索 " name = "query" type = "text" id = "query" onFocus = "if 
(value == defaultValue){value= '';}" onBlur = "if(!value){value = defaultValue;}" 

onclick = "if(this.value == ''){this,. value = '';this. form. query, style. color = '# 3c98cc'}" /> 

< input class = "notxt1" name = "Submit" type = "submit" value="" /> 

</form> 

</div> 


@ jQuery 插件 实现 图 像 轮 播 

分 别 用 两 个 图 层 来 实现 。 第 1 个 图 层 设置 轮 播 项 目 , 即 设置 若干 个 图 像 超 链接 ; 第 2 
个 图 层 设置 轮 播 导航 , 即 显示 图 像 切换 按钮 *+ 上 一 个 “下 一 个 ”。 需 要 导入 jQuery 插件 等 外 
部 js 文件。 格式 如 下 所 示 : 


< script src = "js/jquery. caroufredsel - 6.0.4- packed. js" type = "text/javascript"></script > 
< script type = "text/javascript" src = "js/focus. js" ></script> 


图 像 轮 播 图 层 代 码 设 计 。 将 需要 轮 播 的 图 像 通过 超 链接 方式 加 入 图 层 中 。 然 后 设计 图 
层 、 超 链接 、 图 像 的 样式 。 无 鼠标 操作 时 ,5 秒 钟 自 动 轮 播 图 像 ; 通过 左右 箭头 实现 图 像 手 
动 切换 。 


<div class = "banner"> 

<! -- 轮 播 (Carousel) 项 目 --> 

<div class = "banner show" id= "banner show"> 

<a href = "http://www. bit. edu. cn/docs/2015 - 12/20151231150540317182. pdf" target = "_blank" 
class = "bannger inbox">< img src = "images/20160214092916760355. jpg" width = "2000" height 
= "376" /></a> 


< a href = "http://www. bit. edu. cn/xww/mtlg/122196. htm" target ="_blank" class = "bannger_ 
inbox">< img src = "images/20160209214347053759. jpg" width = "2000" height = "376" /></a> 
<a href = "http://www. bit. edu. cn/xww/xsjl1/122117. htm" target ="_blank" class = "bannger_ 
inbox">< img src = "images/20160205123015139106. jpg" width = "2000" height = "376" /></a> 
<a href = "http://www. bit. edu. cn/xww/zhxw/121999. htm" target ="_ blank" class = "bannger_ 
inbox">< img src = " images/20160203144446532941. jpg" width = "2000" height = "376" /></a> 
<a href = "http://www. bit. edu. cn/xww/rwfc/121816. htm" target ="_ blank" class = "bannger_ 
inbox">< img src = "images/20160125122421785034. jpg" width = "2000" height = "376" /></a> 
<a href = "http://www. bit. edu. cn/xww/xsjl1/121230. htm" target = "_blank" class = "bannger_ 
inbox">< img src = "images/20160109092950335551. jpg" width = "2000" height = "376" /></a> 
<a href = "http://www. bit. edu. cn/xww/xsjl1/121233. htm" target = "_blank" class = "bannger_ 
inbox">< img src = "images/20160109094147390608. jpg" width = "2000" height = "376" /></a> 

<! -- 轮 播 (Carousel) 导 航 --> 

< div class = "banner pre next"> 

<a href = "javascript:;" class = "banner btn left"> 上 一 个 </a> 

<a href = "javascript:;" class = "banner btn right"> 下 一 个 </a> 

</div> 

</div> 

</div> 





外 部 focus. js 文件 ,主要 用 途 是 实现 焦点 图 切换 ,代码 如 下 : 


/* 焦点 图 切换 * / 
$ (function(){ 


var timer = 5000; // 定 义 时 间 间 隔 

var showtime = 800; // 定 义 显示 时 间 

Var showbox = $ ("#banner show"); // 定 义 jQuery 对 象 变量 
var inbox = $ (".bannger inbox"); // 定 义 jQuery 对 象 变量 
Var movelist = $("#yq banner list"); // 定 义 jQuery 对 象 变量 
var s; 

varb = 0; 


var size = inbox. size(); 
var play = 1; 
function move( ){ // 图 像 移 动 切换 
b++; 
if(b> size—1){ 
b=0; 
} 
inbox. each( function(e){ 
inbox. eq(e). hide(0); 
$ ("#banner magbox" + e). hide(); 
movelist. find("a").eq(e). removeClass("hover"); 
if(e == b){ 
inbox. eq(b). fadeIn( showtime); 
$ ("#banner magbox" + b). show(); 
movelist. find("a").eq(b).addClass("hover"); 


D); 
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s = setInterval(move, timer); // 定 时 执行 move() 
function stopp(obj){ // 停 止 执行 
$ (obj). hover(function(){ 
if(play){ 
clearInterval(s); 
play = 0; 
| 
} ,function(){ 
if(!play){ 
s = setInterval(move,timer); 
play = 1; 
} 
D); 
} 
stopp(". banner show"); 
$ (".banner_btn right").click(function(){ // 单 击 右 箭头 
move( ); 


]) 


$ (".banner_btn_left").click(function(){ // 单 击 左 箭头 


if(b<0){ 
b= size 一 1 
上 
inbox. each( function(e){ 
inbox. eq(e). hide(0); 
movelist. find("a").eq(e). removeClass("hover"); 
if(e == b){ 
inbox. eq(b). fadeIn( showtime); 
movelist. find("a").eq(b).addClass("hover"); 
} 
}); 
1); 


movelist. find("a").click(function( ){ 
var rel = $ (this).attr("rel"); 
inbox. each( function(e){ 
inbox. eq(e). hide(0); 
movelist. find("a").eq(e). removeClass("hover"); 
$ ("#banner_magbox" + e).hide(0); 
if(e == rel){ 
inbox. eq(rel). fadeIn( showtime); 
movelist. find("a").eq(rel).addClass("hover"); 
$ ("#banner magbox" + rel). show(0); 
| 
D); 
DD); 
$ (".bannger_inbox").each(function(e){ 
var inboxsize = $ (".bannger inbox"). size(); 


inboxwimg = $ (this).find("img").width(); 
$ (".bannger_inbox").eq(e).css({"margin - left":(— 1)* inboxwimg/2 + "px","z— index": 

inboxsize — e}); 

]) 

]) 

/* 新 闻 列 表 滚动 * / 

$ (function(){ 

$ ('#carousel ul').carouFredSel({ 
prev: '#prev', 
next: '#next', 

scroll: 1000 

DD; 

1); 

@ 主体 内 容 设计 

主体 内 容 设计 主要 包括 北 理 新 闻 \ 北 理 快讯 .公共 服务 ,专题 报道 .通知 公告 。 

。 北 理 新 闻 。 此 部 分 采用 图 像 超 链接 实现 图 文 混 排 效果 ,三 个 图 层 向 左 浮动 。 

。 北 理 快讯 。 采 用 Tab 选项 卡 实现 小 区 域内 显示 大 量 信息 的 功效 。Tab 选项 卡 (也 称 
为 “滑动 门 ”) 是 由 选项 标题 菜单 和 主体 显示 区 域 构成 的 。 选 项 卡 标题 菜 单一 般 采用 
无 序列 表 呈 现 ,设置 无 序列 表 的 class 和 id 属性 ,并 给 每 一 个 列表 项 指派 
onmouseover 或 者 onclick 事件 句柄 , 绑 定 函数 setTab(m,n) ,设置 第 1 个 列表 class 
属性 值 为 hover, 通 过 CSS 定义 hover 为 块 显示 方式 。 指 定 选 项 卡 信息 显示 区 域 是 
通过 无 序列 表 方 式 来 显示 对 应 的 信息 ,然后 在 无 序列 表 中 岩 入 div, 在 div 内 再 嵌入 
定义 列表 ,用 定义 列表 加 载 超 链接 信息 。 代 码 如 下 所 示 ， 





<ul id= "menusl" class = "menu01"> 
<! -- Tab 选项 卡 标题 菜单 --> 
< li class = "hover" onmouseover = "setTab(1,0)"> 
<a href = "xww/xwtt/index. htm">< h3 > 北 理 新 闻 </h3 ></a> 
</1i> 
< 1i onmouseover = "setTab(1,1)"> 
<a href = "xww/xwkx/index. htm">< h3 > 新 闻 快 讯 </h3 ></a> 
</1i> 
<1i onmouseover = "setTab(1,2)"> 
<a href = "xww/xsjl1/index. htm">< h3 > 科研 学 术 </h3 ></a> 
</1i> 
</ul> 
<! -- Tab 选项 卡 信息 显示 区 域 ~-> 
<div class= "mainl" id= "mainl"> 
<ul class= "block"> 
<1i> 
<div class= "tab list2"> 
<dl> 
<dd><a href = "xww/mtlg/122208. htm" title= 史 人 民 日 报 ] 河 北 怀 来 引入 北 理工 洁净 水 技术 解决 
水 源 污 染 有 了 新 途径 " target = "” blank" 并 人 民 日 报 3 河 北 怀 来 引入 北 理工 洁净 水 技术 解决 … 
</a></dd> 
<dd><a href = "xww/djsz/122211. htm" title = "北京 理工 大 学 2016 年 拥军优属 工作 圆满 完成 " 
target = "blank"> 北 京 理工 大 学 2016 年 拥军优属 工作 圆满 完成 
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</a></dd> 

</dl> 

</div> 

</1i> 

</ul > 

<ul> 

i> 

<div class= "tab list2"> 

<dl> 

<dd><a href = "xww/djsz/122081. htm" title=" 北 理工 人 文学 院 2015 年 下 半年 学 生 党 员 教 育 活动 
圆满 结束 ”target = "_blank"> 北 理工 人 文学 院 2015 年 下 半年 学 生 党 员 教育 活动 圆 … 
</a></dd> 

</dl> 

</div> 

</li> 

</ul> 

<ul> 

< 

<div class= "tab list2"> 

<dl> 

<dd><a href = "xww/xsjl1/122210. htm" title = "都 灵 理工 大 学 Alberto 教授 等 应 邀 在 北京 理工 大 
学 合作 交流 ”target = ”blank"> 都 灵 理工 大 学 Alberto 教授 等 应 邀 在 北京 理工 大 … 
</a></dd> 

</dl> 

</div> 

</li> 

</ul> 

</div> 


在 banner.js 中 定义 setTab(m,n) 函 数 , 代 码 如 下 所 示 : 


function setTab(m, n){ 
// 参 数 说 明 : m 为 选项 卡 数目 ,n 为 当前 选项 卡 编号 
// 获 取 ID 为 menus +m 的 无 序列 表 中 所 有 的 i 标记 
var tli = document. getElementById("menus" + m). getElementsByTagName("1i"); 
// 获 取 ID 为 bmore+m 图 层 中 所 有 的 strong 标记 
Var tmo = document. getElementById( "bmore" + m). getElementsByTagName( "strong"); 
// 获 取 匡 为 main+m 图 层 div 中 所 有 的 ul 标记 ,ul 标记 包含 每 一 个 选项 卡 需要 显示 的 信息 
Var mli = document. getElementBYId("main" + m). getElementsBYTagName("ul") 
for(i=0;i<tli.length;i++){ 
tli[i].className = (i==n)?"hover":""; // 设 置 指定 的 选项 卡 标题 类 名 为 hover, 即 激活 
mli[i]. style. display = (i==n)?"block":"none"; // 设 置 指定 的 选项 卡 的 显示 属性 为 块 
tmo[i].className = (i==n)?"current02":"";  // 设 置 指定 的 选项 卡 的 类 名 为 current02 
} 
} 






”公共 服务 。 主 要 通过 CSS 加 载 小 图 标 和 文字 链接 来 实现 。 利 用 空 span 标记 应 用 样 
式 加 载 图 标 , 累 计 8 个 超 链 接 , 代 码 如 下 : 


<div class= "fw_con"> 
<aclass= "iconl" href = "gbxxgk/gbxysz2/index. htm" target ="_blank" > 
< span ></span > 学 院 设置 </a> 
<a href = "gbxxgk/gbgljg/index. htm" target = "_blank" class = "icon2">< span ></span > 管理 机 构 
</a> 


</div> 


”专题 报道 。 通 过 图 层 嵌 套 来 实现 , 先 定 义 含 有 两 个 超 链接 的 导航 图 层 , 然 后 分 别 定 
义 两 个 图 层 ,通过 无 序列 表 存 放 信息 ,其 中 第 1 个 图 层 默认 为 显示 ,代码 如 下 所 示 


<div class = "ztbd"> 

<div class = "qie"> 

<a class = "cur" href = "xww/mt1g/index.htm" target = ”blank"> 媒 体 北 理 </a> 

<a href = "xww/ztbd/index. htm" target = "_blank"> 专 题 报 道 </a> 

</div> 

<div class= "bd nol"> 

<ul> 

<1i>< span > 1 </span > <a href = "http://www. miit. gov. cn/n1146290/n1146402/n1146445/ 
c4638816/content. html" title = "【 工 信和 部 网 ] 北 理工 2016 年 拥军优属 工作 圆满 完成 ”target = 
"_blank">【 工 信和 部 网 ] 北 理工 2016 年 拥军优属 工作 圆满 … 

</a></1i> 

<1i>< span > 2 </span ><a href = "http://edu. people. com. cn/GB/8216/402328/" title="[ 人 民 
网 ]2016 北 理工 校长 胡 海 岩 贺 新 春 " target = "_blank" 光 人 民 网 }2016 北 理工 校长 胡 海 岩 贺 新 春 
</a></1i> 

</ul > 

</div> 

<div class = "bd"> 

<ul> 

<1i>< span>1</span><a href = "http://10.4.20.118/HomeWeb/index/index. html" title = "北京 
理工 大 学 "三 严 三 实 " 教 育 专题 ”target = "_blank"> 北 京 理工 大 学 "三 严 三 实 "教育 专题 

</a></li> 

<1i>< span>2</span><a href = "xww/ztbd/107267. htm" title = " 北 理工 "综合 改革 、 争 创 一 流 " 大 
讨论 专题 " target = "_blank"> 北 理工 "综合 改革 、 争 创 一 流 "大 讨论 专题 

</a></li> 

</ul> 

</div> 

</div> 


专题 报道 需要 引用 外 部 JS 文件 tab3.js, 引 用 格式 如 下 所 示 : 


< script src = "js/tab3. js" type = "text/javascript"></script > 


外 部 JS 文件 tab3.js 采用 jQuery 编程 ,内 容 如 下 所 示 : 
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/* tab 选项 卡 切换 * / 
window. onload = function(){ 
$ (".fuli").mouseenter( 
function(){ 
$ (this).addClass("cur"). children(".menu"). show(). parent(). siblings(".fuli").children(". 
menu" ) . hide( ); 
}); 
$ (".fuli").mouseleave( 
function(){ 
$ (this). removeClass("cur").children(".menu"). hide(); 
D); 
$ (".qie a"). mouseenter( // 鼠 标 进入 图 层 qie 区 域内 的 超 链接 时 
function(){ 
$ (this).addClass("cur" ). siblings("a").removeClass("cur"). parent(".qie"). siblings('. bd'). 
eq( $ (this). index()). show(). siblings('.bd').hide(); 
I 
} 


。 通知 公告 。 由 三 个 图 层 嵌 套 构成 ,外 图 层 中 包含 两 个 子 图 层 , 第 一 个 子 图 层 包 含 标 
题 ; 第 二 个 子 图 层 包含 按 日 期 分 类 的 通知 信息 ,实现 方法 比较 简单 ,此 处 省 略 代码 。 
@ 底部 设计 
分 为 4 个 子 div, 类 名 分 别 为 sfdr2( 通 用 链接 )、fot_link( 超 链接 )、fot_logo( 事 业 单 位 
logo) ,fot_bq( 版 权 )。 代 码 如 下 所 示 : 


<div class = "fot_wrap"> 
<div class = "footer"> 
<div class= "sfdr2"> 
<aclass = "abgl" href = "dhw/zxs/index. htm"> 在 校生 </a> 
<a class = "abg2" href = "dhw/jzg/index. htm"> 教 职工 </a> 
<a class = "abg3" href = "dhw/ks/index. htm"> 考 生 </a> 
<a class = "abg4" href = "dhw/dhxy/index. htm"> 校 友 </a> 
</div> 
<div class = "fot_ link"> 
<a href = "http://www. bit. edu. cn/gbxxgk/96954. htm"> 领 导 信箱 </a> 
<a href = "http://renshichu. bit. edu. cn/zpxx/index. htm” target = "_blank"> 招 聘 信息 </a> 
<a href = "http://www. bit. edu. cn/gbxxgk/97275. htm"> 联 系 我 们 </a> 
<a href = "gbwzdt/index. htm"> 网 站 地 图 </a> 
</div> 
<div class = "fot logo"> 
<table><tr><td>< img src = "images/blue. png" width= "79" height = "64" /> 
</td></tr ></table > 
</div> 
<div class = "fot_bq"> 北 京 理工 大 学 版 权 所 有 地 址 : 北京 海淀 区 中 关 村 南大 街 5 号 邮编 : 100081 
<br/> 服 务 邮箱 : (网 页 内 容 )Webmaster@bit. edu. cn (网 络 服务 )service@bit. edu. cn < br/> 京 ICP 
备 10019879 号 京 公 网 安 备 110402430044 号 
</div> 
</div> 
</div> 


(3) 表现 设计 
网 站 所 有 样式 文件 统一 写 在 外 部 CSS 文件 中 ,文件 名 为 style_zzgb. css。 通 过 链 入 外 
部 样式 表 的 方式 插入 在 HTML 页 面 的 头 部 。 格 式 如 下 所 示 


< link href = "css/style_zzgb. css" type = "text/css" rel = "stylesheet" /> 
Q@ 网 站 通用 样式 设置 


x* {border:0px;padding:0px;margin:0px;} 

body{font - size:12px;font - family:" 宋 体 ";background: # fff; margin: 0px auto} 
ul{list- style 一 type: none} 

li{list— style 一 type: none} 

aftext - decoration: none; color: #656464} 

a:hover{color: #095d40} 


@ 头 部 header 样式 设置 


.header{height :130px;width:1000px; position:relative;margin:0px auto; z ~ index:99999;} 
.top{overflow: hidden; height:90px} 
.logo{width:273px;float: left;padding - top:15px} 
.top_link{height: 26px;font - family: "微软 雅 黑 ";width:511px; 
loat: right; padding ~ top: 45px} 
. Sfdr{overflow:hidden; height: 26px; width: 316px; float: left} 
, sfdr li{height: 26px; width: 67px; float: left; margin: 0px 5px; line ~ height: 26px} 
, sfdr a{font ~ size: 14px; height: 26px; width: 67px; float: left; 

color: #fff; text ~ align: center; display: block; line- height: 26px} 
.sfdr span{font - size:14px; height: 26px; width: 67px; float: left; color: # fff; text - align: 
center; display: block; line— height: 26px} 
. sfdr a:hover {color: #fff} 
#menul 1i.abgl a{background:url("../images/d_bgl. jpg") no - repeat left bottom} 
#menul li.abgl span{background:url("../images/d_bgl. jpg") no - repeat left top} 
#menul 1i.abg2 a{background:url(". ./images/d_bg2. jpg") no - repeat left bottom} 
#menul 1i.abg2 span{background:url("../images/d_bg2. jpg") no - repeat left top} 
#menul 1i.abg3 a{background: url("../images/d_bg3. jpg") no - repeat left bottom} 
#menul 1i.abg3 span{background:url("../images/d_bg3. jpg") no - repeat left top} 
#menul 1i.abg4 a{background: url("../images/d_bg4. jpg") no - repeat left bottom} 
#menul 1i.abg4 span{background: url("../images/d_bg4. jpg") no - repeat left top} 
.ya{height:26px;width:185px; float:left;padding — left:10px; line - height: 26px} 
.ya a{color: #707070;} 
.ya a:hover {color: #095d40;background: # FFFFFF;} 


@ 二 级 导航 菜单 样式 设置 


.nav{height :40px;width:810px; position: relative;float:left;z— index:2000} 

.nav li{font - size:14px; font - family:" 微 软 雅 黑 ";width:70px; float: left; margin - right: 
28px; position:relative; z- index:2000; } 

.nav li afbackground: url("../images/nav_libg. jpg") no - repeat right center; color: # 000; 
display: block; line- height: 40px;height:40px;width:70px;} 





“Web 前 端 开 发 项 枯 ” 课 程 证 计 


Web 前 庙 开 发 投 术 实验 与 实践 一 一 日 TML5、CSS3、JavaScript( 第 3 版 ) 





.nav li a:hover{background: url("../images/nav_lihbg. jpg") no - repeat right center; color: 
#095d40;} 

.nav dl{height:auto;width:278px;background: # fff;position: absolute; display: none; 
padding - bottom:0px 7px 12px 7px; left: Opx; top: 40px; filter: alpha(opacity = 80); opacity: 
0.8;z— index: 2000; } 

.nav dl dd{width:139px;float:left;line — height:28px} 

.nav dl dd af background:url(". ./images/1i bg. jpg") no - repeat left center; font - family:" 微 
软 雅 黑 ";width:116px; color: #505050; padding - left: 14px;display: inline 一 block;} 

.nav dl dd a: hover{background: url("../images/li_hbg. jpg") no - repeat left center; color: 
间 095d40;} 


@ 搜索 栏 CSS 设置 


. sea_box{right:0px;position:absolute; bottom:12px;} 

. search{background:url("../images/sea_bg. jpg") no - repeat; height:27px; 
width:177px;position:relative;} 

. Search input{ background: none transparent scroll repeat 0% 0%; border - style:none; height: 
27px; width:140px; position: absolute;color: #828181;padding - left: Opx; left: Opx; line— 
height: 27px; top: Opx} 

. Search input. notxt {color: #828181; padding - left: 7px} 

. Search input. notxtl { background: none transparent scroll repeat 0% 0$%;cursor: pointer; 
height: 27px; width: 30px; border - style: none; position: absolute; left: 147px; top: Opx;} 


@ 图 像 轮 播 样式 设置 


.banner{ position:relative;width:100 % ;height:376px; overflow:hidden;margin:0 auto; } 
.banner _ show {width: 100 % ; text — align: center; height: 376px; overflow: hidden; position: 
relative;} 

.bannger_inbox{position:absolute; left:50 % ;top:0;} 

.banner pre next{position:relative;z — index:105;top:40 % ;width:100 % ;left:0;height:30px; 
margin:0 auto;} 

.banner_pre_next a{ background: url(../images/2013zzgb/arrows. png) no - repeat; width: 30px; 
height:30px; text - indent: ~ 999em;} 

.banner_pre_next . banner _btn left {position: absolute; left: 30px; background — position: 
Opx Opx;} 

.banner pre_next .banner_btn_right {position:absolute; right:30px; background - position: 一 
30px Opx;} 


@ 主要 内 容 一 一 新 闻 CSS 设置 


.Content {overflow: hidden; width: 1000px; margin: 8px auto;} 

.bl_news {overflow: hidden; margin - bottom: 20px; height: 303px; width: 632px; float: left;} 
.news_title {overflow: hidden; height: 75px} 

.news_title h2 {font - size: 18px; height: 75px; font - family: "微软 雅 黑 ", "黑体 "; font - 
weight: normal; color: #000; line— height: 75px;} 

.news_title h2 a {font - size: 12px; color: #878585; padding - left: 14px} 

.news_title h2 a:hover {color: #095d40} 

.news_con {height: 226px;border - top:1px solid # e4e4e4; border - bottom: 1px solid # e4e4e4; 
Padding:0px 2px;} 


.new_boxl {overflow: hidden; height: 180px; border - right:1px solid # ede4e4; width: 180px; 
float: left; padding:18px 17px 18px Opx;} 

.Con_box img {height: 120px; width: 180px;} 

.Con_box h3 {overflow: hidden; font - size: 12px; height: 40px; font - weight: normal; padding 
— bottom: Opx; padding - top: 20px; padding — left: 9px; line — height: 20px; padding 一 
right: 13px;} 

.Con_box h3 a {background: url("../images/li_bg. jpg") no - repeat right 30px; color: # 
656464; display: block;} 

.Con_box h3 a:hover {background: url("../images/li_hbg. jpg") no - repeat right 30px; color: # 
095d40;} 

.new_box2 {overflow: hidden; height: 180px; border - right: lpx solid # e4e4e4 ; width: 180px; 
float: left; padding:18px 17px;} 

.new_ box3 {overflow: hidden; height: 180px; width: 180px; float: left; padding: 18px Opx 
18px 18px;} 


@ 主要 内 容 一 一 新 闻 快 讯 CSS 设置 


# kx_news {overflow: hidden; margin - bottom: 20px; height: 303px; width: 328px; float: 
right;} 

.menulbox {overflow: hidden; height: 75px; position: relative;} 

.menu01 {height: 75px; width: 280px; position: absolute; left: 0px; z ~ index: 1; top: Opx;} 
.menu01 1i {overflow: hidden; height:75px;width:93px;float: left; line— height:75px;} 
.menu01 1i h3 {cursor: pointer; font - size: 18px; height: 46px; font - family: "微软 雅 黑 "; 
width: 93px; float: left; font - weight: normal; text - align: center; margin - top: 15px; line 一 
height: 46px;} 

.menu01 . hover h3 {height: 42px; width: 93px; font - weight: normal; color: # fff; text — 
align: center; margin - top: 15px; line - height: 42px; background - color: #0e8b61;} 

.menu01 1i h3 a:hover {} 

.mainlbox {overflow: hidden; width: 328px; clear: both;} 

.mainlbox ul {display: none;} 

.mainlbox ul. block {display: block;} 

.mainlbox ul 1i {height: 235px; padding - bottom: Opx; padding - top: Opx; padding - left: Opx; 
margin: Opx; padding - right: Opx;} 

.tab_list2 dl dd {background: url("../images/li_bg. jpg") no - repeat left center; padding — 
left: 14px; margin - left: 4px; line— height: 26px;} 

.tab list2 dl dd span {height: 40px; width: 160px; float: left; display: block;} 

.tab list2 dl dd div {height: 40px; width: 560px; float: right;} 

.tab list2 dl dd div h2 {font - size: 14px; height: 30px; font - weight: bold; color: #1f4f7c; 
line ~- height: 30px;} 

.tab list2 dl dd div a {font ~ size: 14px; color: #4c4c4c; line— height: 30px;} 

.bmorel {height: 75px; width: 60px; float: right; padding ~ right: Opx;} 

.bmorel strong {font - size: 12px; height: 75px; width: 78px; float: right; font — weight: 
normal; display: none; line— height: 75px;} 

.bmorel strong a {font — size: 12px; height: 65px; width: 78px; color: #878585; padding 一 
bottom: lpx; text 一 align: left; padding- top: 10px; padding — left: 30px; display: block; line— 
height: 65px; padding — right: 30px;} 

.bmorel strong a:hover {color: #095d40;} 

.bmorel strong. current02 {display: block;} 

.bmorel strong. current02 a:hover{color: #666666;} 
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主要 内 容 一 一 公共 服务 CSS 设置 


.fw {margin— bottom: 47px; height: 190px; width: 493px; float: left; padding — bottom: 47px; _ 
width: 504px; ”/* 仅 对 IE6 有 效 ,而 且 必 须 放 在 width 属性 的 后 面 * /} 

.fw_con {overflow: hidden; height: 69px; padding: 23px Opx;} 

.fw_con a {overflow: hidden; height: 69px; font - family: "微软 雅 黑 "; width: 50px; float: 
left; text— align: center; display: block; line— height: 24px; margin— right: 11px;} 

.fw_con a span {height: 45px; width: 50px; display: block;} 

.fw_con a. iconl span {background:url("../images/icon 01. jpg") no - repeat center 50% ;} 
.fw_con a. icon2 span{background:url("../images/icon 02. jpg") no - repeat center 50% ;} 
.fw_con a. icon3 span{background:url(". . /images/icon 03. jpg") no - repeat center 50% ;} 
.fw_con a. icon33 span{background:url("../images/icon 033. jpg") no - repeat center 50% ;} 
.fw_con a. icon4 span{background:url("../images/icon 04. jpg") no - repeat center 50% ;} 
.fw_con a. icon5 span{background:url("../images/icon 05. jpg") no - repeat center 50g% ;} 
.fw_con a. icon6 span{background:url("../images/icon 06. jpg") no - repeat center 50% ;} 
.fw_con a. icon7 span{background:url("../images/icon 07. jpg") no - repeat center 50% ;} 
,fw_con a, icon8 span{background:url(",.. /images/icon 08. jpg") no - repeat center 50% ;} 


@@ 主要 内 容 一 一 专题 报道 及 通知 公告 CSS 设置 


.Ztbd {height: 190px; width: 237px; float: left; padding - bottom: 47px; margin: 0px 32px 47px; 
_margin: 0 25px 47px; /x* 仅 对 IE6 有 效 ,而 且 必须 放 在 margin 属性 的 后 面 * /} 

. zt_con {overflow: hidden; height: 115px;} 

.tz_ con {overflow: hidden; height: 115px;} 

.Zt_con li {overflow: hidden; height: 53px; border - bottom: 1px solid #e4e4e4;} 

.tz con li {overflow: hidden; height: 53px; border - bottom: 1px solid #e4e4e4;} 

.zt_con li span {font - size: 14px; height: 24px; font - family: comic sans ms; width: 24px; 
background: #elelel; float: left; color: # 6e4401; text - align: center; margin: 10px Opx 
19px; display: block; line— height: 24px;} 

.zt_con lia {height: 40px; width: 180px; float: left; padding:10px 10px 3px 22px; display: 
block; line— height: 20px;} 

.tz_new {overflow: hidden; margin — bottom: 47px; height: 190px; width: 206px; float: left; 
padding - bottom: 47px;} 

.tz_con li span {font - size: 14px; height: 40px; font - family: comic sans ms; width: 38px; 
float: left; color: #6e4401; text - align: center; margin: 10px 0px 19px; display: block; line 
— height: 20px;} 

.tz_con li span b {font ~ size: 12px; font - weight: normal;} 

.tz_ con lia {height: 40px; width: 150px; float: left; padding: 10px 3px 3px 15px; display: 
block; line— height: 20px; _padding: 10px 3px 3px 12px; /* 仅 IE6 支持 * /} 


@@ 底部 CSS 设置 


.fot_wrap{overflow: hidden; height: 100px; width: 100% ; background: # d0c5ba; margin: 0px 
auto;} 

.footer{overflow: hidden; height: 76px; width: 1000px; padding:12px 0px; margin: 0px auto;} 

. sfdr2 {overflow: hidden; height: 76px; border - right: lpx solid # 8a8a8a; width: 182px; 
float: left; padding — right: 2px;} 


. sfdr2 a {font - size: 14px; height: 20px; width: 75px; float: left; color: #fff; text— align: 
center; display: block; line- height: 20px; margin 一 right: 16px;} 

. sfdr2 a.abgl {background: #6e4401; margin— top: 11px;} 

. sfdr2 a.abgl :hover {background: url("../images/a_bg5. jpg") no - repeat;} 

. sfdr2 a. abg2 {background: #095d40; margin - top: 11px;} 

. sfdr2 a. abg2:hover {background: url("../images/a_bg6. jpg") no - repeat;} 

. sfdr2 a. abg3 {background: #c16c33; margin: 13px 16px 11px Opx;} 

. sfdr2 a. abg3:hover {background: url("../images/a_bg7. jpg") no - repeat;} 

. sfdr2 a.abg4 {background: #0d8b60; margin: 13px 16px 11px 0px;} 

. sfdr2 a. abg4:hover {background: url("../images/a_bg8. jpg") no - repeat;} 

.fot link{overflow: hidden; height: 76px; border - right: 1px solid # 8a8a8a; width: 168px; 
float: left; padding — left: 29px;} 

.fot link a{height: 26px; width: 75px; float: left; color: # 5b5a5a; margin: 8px Opx Opx; 
display: block; line— height: 26px;} 

.fot_link a:hover {color: #095d40;} 

.fot_logo{height: 64px; border - right: #8a8a8a lpx solid; width: 79px; float: left; padding 
— bottom: 10px; padding - top: 2px; padding - left: 49px; padding - right: 42px;} 

.fot bq {width: 429px; float: left; color: #5b5a5a; padding - bottom: Opx; padding - top: 4px; 
padding - left: 17px; line - height: 24px; padding ~ right: Opx;} 


任务 2 企业 网 站 设计 


1. 任务 概述 

任务 要 求 运 用 DIV 十 CSS 十 JavaScript 十 jQuery 完成 同方 股份 有 限 公司 网 站 (http:// 
www. thtf. com. cn/) 首 页 的 设计 ,页 面 效果 如 图 2-2-1 所 示 。 

从 页 面 布 局 设计 、 内 容 编排 ,表现 设计 、 交 互 与 动态 效果 设计 等 多 个 方面 完成 企业 网 站 
设计 。 企 业 网 站 首页 中 主要 包含 下 拉 二 级 导航 菜单 .搜索 栏 jCarousel 滚动 切换 传输 插件 、 
JiaThis 分 享 按钮 工具 等 表现 形式 。 

2. 任务 实施 

(1) 页 面 布局 设计 

根据 图 2-2-1 所 示 的 页 面 效 果 , 设 计 网 站 首页 的 DIV 结构 ,如 图 2-2-2 所 示 。 

(2) 内 容 编 排 

根据 图 2-2-2 所 示 的 DIV 分 区 图 ,分 别 设计 每 一 个 分 区 内 容 、 表 现 及 互动 效果 。 

@ 头 部 导航 菜单 设计 

头 部 包含 下 拉 导 航 菜单 和 网 页 中 、 英 文 切换 链接 。 其 中 包含 两 个 图 层 , 图 层 的 类 名 分 别 
为 top content ,菜单 效果 如 图 2-2-3 所 示 。 在 类 名 为 content 的 图 层 内 设置 导航 菜单 ,一 级 
水 平 导 航 菜单 采用 无 序列 表 实 现 , 每 个 列表 项 表示 一 个 导航 菜单 ,如 果 一 级 导航 菜单 有 子 菜 
单 的 话 ,在 列表 项 1i 标记 内 包含 一 个 子 菜单 图 层 ,id 为 sub_menu, 在 子 图 层 内 插入 若干 个 
超 链接 表示 二 级 下 拉 菜 单 ,默认 二 级 下 拉 菜 单 是 不 显示 ,鼠标 盘旋 时 通过 jQuery 实现 其 显 
示 ,代码 格式 如 下 : 





同方 股份 有 限 公司 网 站 
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同方 首页 。 关于 同方 。 产业 茹 笑 。 核心 能 力 。 胶东 天 地 。 同方 之 再 ENeUSH | 
号 注 华 同方 。 wmun_==uaseu 两 验 入 关 名 


中 国 广 播 电视 
无 线 覆盖 的 领航 者 





关于 同方 同方 之 声 
同方 是 以 科技 成 果 产 业 化 为 模式 ,致力 于 信息 和 能 源 环境 
让 两 大 领域 的 高 科技 上 市 公司 


1 月 21 日 ， 以 重型 陋 和、 服务 新 为 主 的 2015 太 能 服务 产业 年 度 几 会 在 
可 召开 会 上 网 方 德 轩 奈 科技 有 限 公司 及 援 邓 十 二 五 本 服务 产业 认 
出 两 献 企 业 ，2015 芋 能 服务 产业 品 歪 企业 双 浆 仿 。-[ 查 看 更 多 ] 





次 便 果 的 局 重 
的 主 代 是 企业 。6 月 25 日 ,以 立足 科技 , 发 展 科 _| 查 村 更 和 ] 


区 
ss 
公司 导航 
ae， | La | En 
联系 我 们 ”招聘 信息 3 Ons HR Ee O04 加 更 多 1 
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2-2-1 同方 股份 有 限 公司 网 站 首页 





导航 


大 图 轮 播 





主体 区 域 1 

















主体 区 域 2 


2-2-2 ”网 站 首页 DIV 分 区 图 



































2-2-3 ”二 级 菜单 效果 图 


<div id = "top"> 
<div class = "content"> 
<ul class = "menu"> 
<1i><a class = "on" href = "http://www.thtf.com.cn/"> 同 方 首页 </a></1i> 
<li><a rel = "1" href ="/plus/list.php?tid= 3"> 关 于 同方 </a> 
<div id= "sub_menu"> 
<a href = "/plus/1list. php?tid = 3"> 集 团 简介 </a> 
<a href = "/plus/list. php?tid = 5"> 集 团 高 管 </a> 
<a href = "/plus/list. php?tid= 6"> 发 展 路 径 </a> 
<a href = "/plus/list. php?tid= 7"> 企 业 荣誉 </a> 
</div> 
</1i> 
<1li><a rel= "8" href ="/plus/list.php?tid= 8"> 产 业 概览 </a> 
<div id= "sub_menu"> 
<a href = "/plus/list.php?tid= 15"> 信 息 产 业 </a> 
<a href = "/plus/list. php?tid=17"> 安 防 产业 </a> 
<a href ="/plus/list. php?tid= 16"> 节 能 环保 </a> 
<a href = "/plus/list. php?tid= 19"> 投 资 发 展 </a> 
<a href = "/plus/list. php?tid= 20"> 同 方 科技 园 </a> 
</div> 
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</1i> 
<1i><arel="9" href ="/plus/list.php?tid = 9"> 核 心 能 力 </a></1i> 
<1i><a rel = "10" href = "/plus/list. php?tid= 10"> 股 东 天 地 </a> 
<div id= "sub_menu"> 
<a href = "/plus/1list.php?tid = 38"> 临 时 公告 </a> 
<a href = "/plus/1list.php?tid = 39"> 定 期 报告 </a> 
<a href = "/plus/list.php?tid = 42"> 投 资 者 保护 教育 </a> 
<a href = "/plus/list. php?tid = 43"> 股 市 行情 </a> 
<a href = "/plus/list.php?tid = 40"> 治 理 制度 </a> 
<a href = "/plus/list.php?tid = 45"> 投 资 者 互动 </a> 
<a href = "/plus/list. php?tid= 50"> 历 年 分 配 </a> 
<ahref = "/plus/list. php?tid= 49"> 主 要 财务 指标 </a> 
<a href = "/plus/list. php?tid = 60"> 会 议 资料 </a> 
</div> 
</li> 
<li><a rel = "11" href = "/plus/list. php?tid= 32"> 同 方 之 声 </a> 
<div id= "sub menu"> 
<a href = "/plus/1list. php?tid = 32"> 同 方 新 闻 </a> 
<a href = "/plus/l1ist. php?tid = 33"> 深 度 报道 </a> 
<a href = "/plus/list. php?tid= 66"> 产 业 广 场 </a> 
<a href = "/plus/list.php?tid = 34"> 媒 体 看 同方 </a> 
<a href = "/plus/list.php?tid = 35"> 同 方 电视 台 </a> 
<a href = "/plus/list.php?tid = 84"> 公 告 通知 </a> 
<a href = "/plus/list. php?tid= 87"> 打 假 专 区 </a> 
</div> 
</li> 
</ul> 
< span class = "lan"> 
<a href = "http://en.thtf. com. cn/" class = "f_arial"> ENGLISH </a>|<a href = " 
http://www. thtf. com. cn/" class = "fc_999"> 中 文 </a> 
</span> 
</div> 
</div> 


二 级 下 拉 菜 单 显示 通过 名 为 common.js 的 外 部 JS 实现 。 代 码 如 下 所 示 : 


$ (function(){ 
// 二 级 下 拉 莱 单 
$ (".menu 1i").hover(function(){$ (this). children("div"). show(); $ (this). children("a"). 
addClass("on");}, function(){$ (this). children("div"). hide(); $ (this). children ("a"). 
removeClass("on")}); 
//index 
$ (". index .part2 .pic"). hover( 
function(){ 
$ (this). children(".bg"). fadeIn(); 
},function( ){ 
$ (this). children(".bg"). hide(); 
} 


// 搜 索 
$ (".input1"). focus(function(){ 

vara = $ (this).val(); 

$ (this).addClass("input hover"); 

$ (this).val(""); 
}).blur(function(){ 

$ (this). removeClass("input hover"); 
D); 
ji 


@ Logo 及 搜索 栏 设计 

主要 由 类 名 为 logo、search 的 两 个 div 构成 。 第 一 个 div 里 插入 logo, 第 二 个 div 里 插 
入 一 个 表单 。 为 了 便于 网 站 访问 者 检索 信息 ,一 般 网 站 首页 都 会 设计 搜索 栏 , 用 表单 来 实 
现 。 搜 索 框 内 默认 值 为 “请 输入 关键 词 ”, 获 得 焦点 时 自动 清空 ,失去 焦点 时 , 若 无 内 容 则 自 
动 赋值 为 默认 值 。 其 实现 代码 如 下 : 


<div id= "main" class = "index"> 
<div class= "head"> 
<div class = "1ogo"><a href = "http://www.thtf. com. cn/"> 清 华 同方 </a>< span > 创建 世界 一 
流 高 科技 企业 </span> 
</div> 
<div class = "search"> 
< form action = "http://www. thtf. com. cn/plus/search. php" method = "post"> 
< input type = "hidden" name = "dopost" value = "search" /> 
< input class = "inputl" value = "请 输入 关键 词 " onfocus = "if(this. value == ' 请 输入 关 
键 词 '){this. value = '';}" onblur = "if(this. value == ''){this. value = ' 请 输入 关键 词 ';}" type=" 
text" name= "q" /> 
< input class = "ss" type = "submit" name = "submit" value = "搜索 " /> 
</form> 
</div> 
</div> 


@ jQuery 插件 实现 图 像 轮 播 

jCarousel 是 一 款 jQuery 插件 ,用 来 控制 水 平 或 垂直 排列 的 列表 项 。 这 些 项 目 ( 可 以 是 
静态 HTML 内 容 或 是 Ajax 加 载 内 容 ) 内 容 是 可 以 来 回 滚动 的 (可 以 有 动画 效果 )。 分 别 用 
两 个 图 层 来 实现 。 第 一 个 图 层 类 名 为 banner, 第 二 个 图 层 id 为 rolldiv ,作为 图 像 切 换 滚 动 
图 层 。 需 要 导入 jQuery 及 jCarousel, 格 式 如 下 所 示 : 


< script type = "text/javascript”src = "js/jquery.min. js"></script> 
< script type = "text/javascript" src = "js/xh_rol1. js"></script> 
< Script> 
$ (function(){ 
jQuery( '#mycarousel'). jcarousel({ 
// 每 次 滚动 切换 的 图 像 数目 为 1, 支 持 循环 滚动 显示 ,5 秒 内 容 定 期 自动 滚动 
scroll: 1, 
wrap: "circular'， 





“Web 前 副 开 秋 技术 "课程 设计 


Web 前 端 开 发 技术 实验 与 实践 一 一 日 TML5、CSS3、JavaScript( 第 3 版 ) 





auto:5 
D); 
}) 


</script > 


在 id 为 rolldiv 的 图 层 中 ,将 需要 轮 播 的 图 像 和 提示 文字 超 链接 通过 无 序列 表 标 记 来 加 
载 。 每 一 个 i 标记 包含 一 个 p、 两 个 div。p 标记 内 插入 需要 轮 播 的 图 像 ,一 个 div 设置 背 
景 ,一 个 div 中 插入 提示 文字 超 链 接 。 通 过 CSS 加 载 背 景 图 像 ,实现 单 击 左 、 右 箭头 手动 切 
换 图 像 。jCarousel 在 HTML 文档 中 基本 的 HTML 标记 结构 如 下 : 


<div class = "banner"> 
<div id= "rolldiv"> 
<ul id= "mycarousel" class = "jcarousel - skin— tango"> 
<1i> 
<p>< img src= "images/1 - 1601061H41DB. jpg" width = "1200" height = "500" border 
="0" /></p> 
<div class= "bg"></div> 
<div class= "tit"><a href = "/plus/view, php?aid = 1" target ="_blank"> 让 生活 更 
绿色 </a> </div> 
</li><1i> 
<p>< img src ="images/1 - 1601061H531520. jpg" width = "1200" height = "500" 
border = "0" /></p> 
<div class= "bg"></div> 
<div class = "tit"><a href = "/plus/view. php?aid = 258" target ="_blank"> 同 方 大 
数据 指挥 中 心 </a> </div> 
</li><1i> 
<p>< img src = "images/1 - 150G310004230. jpg" width = "1200" height = "500" 
border = "0" /></p> 
<div class = "bg"></div> 
< div class= "tit"><a href = "/plus/view.php?aid = 2" target = "_blank">E 人 E 本 
- T8S 隆重 上 市 </a> </div> 
</1i>< 1i> 
<p>< img src = "images/1 - 14120414013D09. jpg" width = "1200" height = "500" 
border = "0" /></p> 
<div class = "bg"></div> 
< div class = "tit"><a href = "/plus/view. php?aid = 242" target = "_blank">" 芯 " 动 
世界 , 智 赢 未 来 </a> </div> 
</li><1i> 
<p>< img src =" images/1 - 1601061H44S45. jpg" width = "1200" height = "500" 
border = "0" /></p> 
<div class = "bg"></div> 
< div class = "tit"><a href = "/plus/view. php?aid = 256" target = "_blank"> 同 方 鼎 
欣 云 医 学 影像 平台 </a> </div> 
</1i><1i> 
<p>< img src = "images/1 - 151120150S2400. jpg" width = "1200" height = "500" 
border = "0" /></p> 
<div class= "bg"></div> 


<div class= "tit"><a href = "/plus/view.php?aid = 260" target = "blank"> 中 国 广 
播 电视 无 线 覆盖 的 领航 者 </a> </div> 
</li><1i> 
<p>< img src = "images/1 - 151203194314150. jpg" width = "1200" height = "500" 
border = "0" /></p> 
<div class = "bg"></div> 
<div class = "tit"><a href = "/plus/view. php?aid = 1102" target = "blank"> 机 械 
革命 游戏 "本 "该 如 此 </a> </div> 
</1i> 
</ul> 
</div> 
</div> 


@ 主体 内 容 设 计 

主体 内 容 设 计 主 要 包括 : 关于 同方 同方 之 声 、 主 营业 务 、 股 东 大 会 .公司 导航 。 
a. 主体 区 域 1。 分 左右 两 个 图 层 , 图 层 插入 相关 段落 、 文 字 、 图 像 超 链接 等 。 

b. 主体 区 域 2。 分 左 .中 \ 右 三 个 图 层 , 图 层 分 别 插入 图 像 和 文字 ,代码 如 下 所 示 ， 


<div class = "partl clearfix"> 
< div class = "fl"> 
< h2 > 关于 同方 </h2 > 
< div class = "content"> 
<p class = "conl f18 f_blue linel">< span><a href = "/plus/1list. php?tid = 3"> 同 方 是 以 科技 
成 果 产 业 化 为 模式 ,致力 于 信息 和 能 源 环境 两 大 领域 的 高 科技 上 市 公司 。</a></span></p> 
<p class = "con2">< span>< img height = "100px" src = "images/ma.png"/></span></p> 
</div> 
<div class = "more"><a href = "/plus/list. php?tid= 3" class = "btn_more"> 更 多 &gt;</a></div> 
</div> 
< div class = "fr"> 
< h2 > 同方 之 声 </h2 > 
<div class = "content"> 
<p class = "conl linel"><a href = "/plus/view. php?aid=1757">1 月 21 日 ,以 重 塑 能 
源 、 服 务 创新 为 主题 的 2015 节能 服务 产业 年 度 峰会 在 京 召开 .会 上 ,同方 泰 德国 际 科技 有 限 公 司 被 授 
予 十 二 五 节能 服务 产业 突出 贡献 企业 .2015 节能 服务 产业 品牌 企业 双 称号 。…</a><a href = "/ 
plus/view. php?aid = 1757">[ 查 看 更 多 ]</a></p> 
< p class = "conl linel"><a href = "/plus/view. php?aid = 1443"> 本 报 记者 陈 和 利 目前 ,中 国 经 济 
发 展 进入 新 时 期 ,尽快 形成 人 人 创新 .万 众 创新 的 局 面 ,关乎 经 济 能 否 再 上 新 台阶 。 创 新 是 发 展 的 动 
力 源泉 ,创新 的 主体 是 企业 。6 月 25 日 ,以 立足 科技 ,发 展 科 …</a><a href = "/plus/view. php?aid 
= 1443">[ 查 看 更 多 ]</a></p> 
</div> 
< div class = "more"><a href = "/plus/list. php?tid= 32" class = "btn_more"> 更 多 &gt;</a></div> 
</div> 
</div> 
< div class = "part2 clearfix"> 
<div class = "fl conl1"> 
<a href ="/plus/list. php?tid = 8" class = "pic">< img src = "ijmages/indexl. jpg" width = 
"380" height = "220" /> 
< span class = "bg"></span> 
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</a> 
<h3><a href = "/plus/list.php?tid= 8"> 主 营业 务 </a></h3> 
<p class = "info"><a href = "/plus/list. php?tid= 8"></a></p> 
<p class = "more">< a href = "/plus/list. php?tid= 8" class = "btn_more"> 更 多 ggt;</a></p> 
</div> 
<div class = "fl con2"> 
< a target = "_blank" href = "http://www. sse. com. cn/assortment/stock/list/stockdetails/ 
price/index. shtml?COMPANY CODE = 600100" class = "pic">< img src = "images/index2. jpg" width 
= "380" height = "220" /> 
< span class = "bg"></span> 
</a> 
<h3><a target = "_blank" href = "http://www. sse. com. cn/assortment/stock/list/stockdetails/ 
price/index. shtml?COMPANY_CODE = 600100"> 股 东 在 线 </a></h3> 
<pclass="info"><a target =" blank" href = "http://www. sse. com. cn/assortment/stock/list/ 
stockdetails/price/index. shtml?COMPANY CODE = 600100"></a></p> 
<p class = "more"><a target =" blank" href = "http://www. sse. com. cn/assortment/stock/list/ 
stockdetails/price/index. shtm1?COMPRNY CODE = 600100" class = "btn more"> 更 多 &gt;</a></p> 
</div> 
<div class= "fr con3"> 
<a href ="/plus/list. php?tid = 48" class = "pic">< img src = "images/index3. jpg" width 
= "380" height = "220" /> 
< span class = "bg"></span> 
</a> 
<h3 ><a href = "/plus/list. php?tid= 48"> 公 司 导 航 </a></h3 > 
<p class = "info"><a href ="/plus/list. php?tid= 48"></a></p> 
<P class = "more"><a href = "/plus/list. php?tid = 48" class = "btn more"> 更 多 &gt;</a></p> 
</div> 
</div> 
</div> 


@ 底部 设计 

分 左 、 右 两 个 子 div, 左 图 层 是 版 权 信息 区 , 右 图 层 是 分 享 按钮 区 。 在 分 享 按钮 区 中 使 用 
专业 网 站 社会 化 工具 提供 商 JiaThis(http://www. jiathis. com/) 提 供 的 分 享 方法 。 从 该 网 
站 可 以 获取 各 种 样式 的 “分 享 到 ”代码 ,直接 插入 在 body 标记 中 即 可 ,代码 以 <!-- JiaThis 
Button BEGIN --> 开 始 , 以 <!-- JiaThis Button END --> 结 束 , 具 体 代 码 如 下 所 示 : 


<div id= "footer"> 
<div class= "content"> 
<div class = "fl1"> 
<p class = "fot_menu f16"><a href = "/plus/list. php?tid = 37"> 联 系 我 们 </a>< a href = 
"/plus/list.php?tid = 46"> 招 聘 信息 </a></p> 
<p><span></span>< span> 
&copy;2013 同方 股份 有 限 公司 版 权 所 有 未 经 授权 禁止 复制 单位 编号 : 1101081932 京 ICP 备 
09081660 号 </span></p> 
<p> 京 公 网 安 备 11010802012616 </p> 
</div> 
<div class= "fr f16"> 
<! -- JiaThis Button BEGIN 一 一 > 





<div class= "jiathis style"> 
< span class = "jiathis_txt"> 分 享 到 : </span> 
<aclass= "jiathis_button_weixin"> 微 信 </a> 
jiathis_button_tsina"> 新 浪 微 博 </a> 
<a class = "jiathis_button_tqq"> 腾 讯 微 博 </a> 
<a class= "jiathis_button qzone"> 00 空间 </a> 
< a href = "http://www. jiathis. com/share" class = " jiathis jiathis txt jiathis 
separator jtico jtico jiathis" target = ”blank"> 更 多 </a> 
<aclass= "jiathis_counter_style"></a> 
</div> 
< script type = "text/javascript" src = "http://v3. jiathis. com/code/jia. js" charset = "utf 
一 8"></script> 
<! -- JiaThis Button END 一 一 > 
</div> 
<div class = "clear"></div> 
</div> 
</div> 





<aclass 








(3) 表现 设计 
网 站 所 有 样式 文件 统一 写 在 外 部 CSS 文件 中 ,文件 名 为 common. css。 通 过 链 入 外 部 
样式 表 的 方式 插入 在 HTML 页 面 的 头 部 ,格式 如 下 所 示 : 


< link href = "css/common. css" type = "text/css" rel = "stylesheet" /> 


Q@ 网 站 通用 样式 设置 


@charset "utf - 8"; 
#{ margin:0; padding:0; border:0; outline:none; list- style:none;} 
html { height:100% ; } 
li{ list- style- type:none;} 
a { text - decoration:none; outline:none; color: #333; border:none;} 
a, area { blr:expression(this. onFocus = this. blur())} 
:hover { text - decoration:underline;} 
img { border:0;} 
body { color: #333; font - size:14px; line— height:1.8em; background: #f5f5f5; font - family: 
"微软 雅 黑 "} 
a img { border:none; } 
.Clear { clear:both;} 
.Clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } 
关 html .clearfix { zoom: 1; } /< IE6 x*/ 
x* :first— child+ html .clearfix { zoom: 1;} /* IE7 */ 
q:before, q:after { content:'';} 
.Overhidden { overflow:hidden; display:inline— block; } 
.align c { text -align:center; } 
.align 1 { text -align:left; } 
.align r { text ~ align:right; } 
.fl { float:left; } 
.fr { float:right; } 
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.f arial{ font ~ family:Arial;} 

.fc_999{ color: #999;} 

.f16{font — size:16px;} 

.£18 { font — size:18px; } 

.f£_blue{ color: #00b0f0;} 

html {_background - image:url(about:blank);_background - attachment:fixed; } /* html 加 上 这 
段 代码 用 于 取消 IE6 滚动 时 元 素 震动 bug * / 

h2{ font - size:26px; color:#000; line— height:40px; font - weight:normal;} 

h2. coml{ margin - bottom:15px;} 

h3{ font - size:20px; color: #000; line- height:30px; font - weight:normal;} 

h3. coml{ margin - bottom:15px;} 

.linel{ background:url("../images/line.gif") 0 100% repeat 一 xi 

.more{ height:30px;} 

.btn_more {float: right; height: 30px; line - height: 30px; color: # fff; padding: 0 25px; 
background: # bcbcbc;} 

.btn more:hover{text - decoration:none; background: #1ab7f1;} 


@ 顶部 菜单 样式 设置 


#top{ background: # e9e9e9; height:50px; line— height:50px;} 

#top .content{ background: # e9e9e9; height:50px; line - height:50px; width:1200px; margin:0 
auto;} 

#top .menu{ float:left;} 

#top .menu li{ float:left; position:relative; z- index:3; } 

#top . menu li a{ display: block; width: 94px; text - align: center; color: # 333; font — 
size:16px;} 

#top . menu li a: hover, # top . menu li a. on{ background: # lab7fl; color: # fff; text 一 
decoration:none;} 

#top #sub_menu{ display:none; width:160px; position:absolute; left:0; top:50px; overflow: 
hidden;} 

#top #sub menu af height:26px; line - height:26px; font - size:14px; width:160px; color:# 
fff; display:block; text - indent:15px; background: #707070; text ~ align:left;} 

#top # sub_menu a:hover{ background: # adadad; } 

#top .lan{ float:right; font ~ size:12px;} 

#top .lan af margin:0 Spx;} 


@@ Logo 及 搜索 栏 样式 设置 


.head { height:125px;} 

.head . logo{ float:left; padding - top:35px; width:500px;} 

.head . logo a{ float: left; width: 180px; height: 50px; background: url("../images/commonl. 
png") 0 0px no - repeat; text - indent: - 999px; overflow:hidden;} 

. head . logo span{ float:left; color: #1ab7fl; padding:22px 0 0 10px;} 

.head . search{ float:right; padding ~ top:45px;} 

.head . search . inputl { width: 170px; height: 28px; line - height: 28px; padding: 0 8px; 
background: # e9e9e9; float:left;} 

.head . search . ss{ width: 35px; height: 28px; float: left; text ~ indent: - 999px; overflow: 
hidden; background:ur1(". . /images/common1. png") 0 —70px no— repeat;} 

. head . search . ss:hover{ background - position: ~ 44px — 70px;} 


中 图 像 轮 播 样式 设置 


井 main .banner{ margin - bottom:40px; position:relative;} 

. banner .text{ color: #fff; position:absolute; left:20px; top:50px; width:280px;} 

.banner .text h2{ color:#fff; font— size:40px; line— height:50px;} 

.banner .text h3{ color:#fff; font - size:25px; line— height:25px;} 

.banner .text p{ line— height:1.6em;} 

/x*auto widthx / 

#main { width:1200px; margin:0 auto; margin - bottom:150px;} 

#rolldiv { width:1200px; height:500px; overflow:hidden; } 

#rolldiv * { padding:0; margin:0; font - size:12px; line- height:18px; } 

#rolldiv . jcarousel - skin - tango . jcarousel - container { overflow: hidden; _display: inline — 
block; } 

#rolldiv . jcarousel - skin - tango . jcarousel - clip { overflow: hidden; } 

/* 滚动 区 域 大 小 */ 

#rolldiv . jcarousel - skin - tango . jcarousel - clip - horizontal { width:1200px; } 

/* 坟 样式 */ 

#rolldiv . jcarousel - skin - tango . jcarousel - item {text - align: center; width: 1200px; 
height :500px } 

#rolldiv . jcarousel - skin - tango . jcarousel - item - horizontal { margin - left:0; margin 一 
rights O02} 

#rolldiv . jcarousel - skin - tango . jcarousel - next - horizontal { position: absolute; top: 
450px; right: Opx; width: 35px; height: 50px; cursor: pointer; background: url("../images/ 
arrow. png") -44px 11px no— repeat; z— index:5;} 

#rolldiv . jcarousel - skin - tango . jcarousel - prev - horizontal { position: absolute; top: 
450px; left: 0; width: 35px; height: 51px; cursor: pointer; background:url("../images/arrow. 
png") 15px 11px no ~ repeat;z - index:5;} 

#rolldiv . jcarousel - skin - tango . jcarousel - next — horizontal: hover { background — 
position: - 44px - 42px; } /* 表示 水 平方 向 切换 图 像 * / 

#rolldiv . jcarousel - skin - tango . jcarousel - prev - horizontal: hover { background — 
position:15px - 42px; } /* 表示 水 平方 向 切换 图 像 * / 

#rolldiv #mycarousel li { position: relative; z- index:2; } 

#rolldiv # mycarousel . bg { background — color: #3 000000; height: 50px; width: 1200px; 
position: absolute; opacity: 0.2; filter:alpha(opacity = 20); left: 0; bottom: 0; } 

#rolldiv # mycarousel .tit a {font - size: 22px; color: #7 FFFFFF; text — decoration: none; 
text ~ align: center; height: 50px; width: 1200px; line - height: 50px; position: absolute; 
left: 0; bottom:0; } 


@ 主体 区 域 1 .主体 区 域 2 样式 设置 


. index .partl { padding - bottom:65px;} 

. index . partl .fl{ width:563px;} 

. index .partl .fr{ width:563px;} 

. index . partl h2{ margin - bottom:20px;} 

. index . partl .fl . content{ height:260px; } 

. index .partl .fl .conl{ padding - bottom:25px; margin - bottom:30px;} 

. index . partl .fl .conl span{background:url("../images/lou. png") 0 5px no - repeat;padding 一 
left:105px;display:block; min— height:80px} 

. index .part1 .fr .content{ background:url("../images/commonl. png") 0 — 408px no - repeat; 
height:260px;} 
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.index .partl .fr .conl{ height:75px; padding - bottom: 30px; margin — bottom:30px; padding 一 
left:105px; } 

. index . partl . fr .con2{ padding — left:105px;} 

. index . partl . fl .con2 span{background:url("../images/weixin. png") 0 5px no - repeat;padding 
— left:75px;display:block; min— height:80px;text ~ align:center} 

.index . part2 .fl{ width:380px; margin - right:30px; position:relative;} 

. index . part2 .fr{ width:380px; position:relative;} 

.index . part2 . pic . bg{ position: absolute; left: 0; top: 0; width: 380px; height: 220px; 
background: # fff; z- index:3;opacity: 0.7; filter:alpha(opacity = 70); display:none; } 

. index .part2 h3{ line - height:60px; background:url("../images/line.gif") 0 100% repeat — x; 
margin — bottom:15px;} 

. index .part2 . info{ color:#999;} 

. index .part2 . info a{ color:#999;} 

. index . part2 .more{ padding ~ top:20px;} 

/* 对 主 营 业务 、 股 东 在 线 、 公 司 导航 部 分 新 增 CSS3 过 渡 及 转换 效果 * / 

.£1,.fr{overflow: hidden;} 

.fl a img,.fra img{overflow: hidden;transition: all 0.5s;} 

.£1 a:hover img, .fr a:hover img{transform: scale(1.3,1.3);} 


@ 底部 版 权 及 分 享 按钮 区 样式 设置 


#footer{ background: # e9e9e9; height:160px; color: #8e8e8e;width:100% } 
#footer .content{ width:1200px; margin:0 auto; padding - top:30px;} 
#footer . fot_menu { padding - bottom:10px;} 

#footer .fot menu a{ color:#333; margin— right:20px;} 

#footer .fr{ color: #333;} 

#footer .fr .text{ float:left;} 


@ 屏幕 宽度 小 于 1200px 时 small. css 的 内 容 


@charset "utf — 8"; 

/* 框 架 */ 

#top{ background: # e9e9e9; height:50px; line— height:50px;} 
#top .content{ width:984px;} 

#main { width:984px; overflow:hidden;} 

# footer .content{ width:984px;} 

/* 通 用 */ 

.list3pic li{ width:260px; overflow:hidden; margin - right:20px; display: inline; background: 
#e9e9e9; text - align:center; height:330px;} 

.list31i li{ width:200px; height:165px; margin:15px 0; margin ~ right:15px; overflow:hidden;} 
.list31i 1i .bg{ width:200px; } 

.list31i 1i .text{ width:200px;} 

/x index*/ 

. index . partl { padding - bottom:65px;} 

. index .partl .fl{ width:455px;} 

. index .partl .fr{ width:455px;} 

. index . partl .fl .content{ height:360px; } 

. index . part1l .fr . content{ height:360px;} 

. index .part2 .fl{ width:308px; overflow:hidden; } 

. index .part2 .fr{ width:308px; overflow:hidden;} 

. index .part2 .pic .bg{ width:308px; height:220px; } 


井 rolldiv { width:984px; } 

#rolldiv . jcarousel - skin - tango . jcarousel - clip - horizontal { width:984px; } 
#rolldiv . jcarousel - skin - tango . jcarousel - item { width: 984px; } 

#rolldiv #mycarousel .bg {width: 984px; } 

#rolldiv #mycarousel .tit a {width: 984px; } 

/xzy*/ 

.ZYy .conRight{ width:824px;} 

.ZY .conLl{ width:630px; overflow:hidden;} 

.ZY .conL2{ width:690px; overflow:hidden;} 

.ZYy .conL3{ width:642px;} 

.ZYy .conR1{ float:right; width:296px;} 

.ZY .conR2{ float:right; width:268px;} 

.2Zy .conR3{ float:right; width:240px;} 

.ZY .ConR4{ float:right; width:180px;} 

.ZY .conR5{ float:right; width:215px;} 

.ZY .conR6{ float:right; width:296px;} 

.gytf4 .tab tit li{ width:260px; margin— right:20px; } 

.Cygk .partl ul{width:970px;} 

.Cygk . partl li{f width:221px; overflow:hidden;} 

.picarea2 .pos_div{ width:480px; margin— right:24px; overflow:hidden;} 
.Picarea3 .con{ width:312px; margin - right:20px; overflow:hidden;} 

.gdtd . partl td{ padding - left:15px;} 

.gdtd . part1 .td bg{ background:none; line - height:35px; color:#fff; width:105px;} 
.gdtd .partl1 . td_bg span{ background:url(../img/commonl. png) 0 — 136px no - repeat; display: 
block; overflow:hidden;} 

.hxnl] .part2 .fl{ width:460px;} 

.hxnl . list3pic li{ width: 310px; overflow: hidden; margin - right: 20px; display: inline; 
background: # e9e9e9; text - align:center; height:330px;} 

. lxwm .conR2{ margin- top:580px;} 

. lxwm .conL2{ width:690px; overflow: inherit;} 

.page a{ padding:0 6px; margin - right:5px; background: # bcbcbc; color: # fff;} 
.page .wy{ margin ~ right:20px;} 

. Show_tfzs . conL1{ width:590px; overflow:hidden;} 

.tfzs . conL1{ width:590px; overflow:hidden;} 

.tfzs3 .conLl{ width:590px; overflow:hidden;} 

.tfzs3 .sp_list li{width:190px; margin ~ right:10px; overflow:hidden;} 

.tfzs3 .sp_list 1i .pic{ width:190px;} 

.tfzs3 .sp_list 1i .bg{ width:190px; background:url(../img/sp_bg.png) 50% 0; } 
.xlc{ margin— right:10px;} 

.Zpxx . conL1{ width:680px; overflow:hidden;} 


同时 需要 在 头 部 head 标记 内 插入 外 部 autowidth. js 文件 ,格式 如 下 所 示 : 


< script type = "text/javascript" src= "js/autowidth. js"></script > 


任务 3 社会 团体 网 站 设计 一 一 成 都 市 互联 网 协会 网 站 


1. 任务 概述 
任务 要 求 运 用 HTML5 新 增 结构 元 素 、 表 格 、.CSS3、JavaScript 等 技术 完成 成 都 市 互联 
网 协会 网 站 (http://www. iscd. org. cn/) 首 页 仿真 设计 ,页面 效果 如 图 2-3-1 所 示 。 
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图 2-3-1 成 都 市 互联 网 协会 网 站 首页 仿真 设计 效果 图 


从 页 面 布局 设计 内 容 编排 ,表现 设计 、 动 态 、 交 互 式 效果 设计 等 多 个 方面 完成 社会 团体 
网 站 设计 。 社 会 团体 网 站 首页 中 主要 包含 一 级 导航 菜单 、 纯 CSS3 和 jQuery 焦点 图 滚动 切 
换 、 纯 CSS3 动感 图 像 新 闻 、 版 权 区 域 导航 等 表现 形式 。 

2. 任务 实施 

(1) 页 面 布局 设计 

根据 图 2-3-1 所 示 的 页 面 效果 ,设计 网 站 首页 布局 结构 , 共 分 为 7 个 区 域 ,分 别 定义 7 个 
区 域 的 样式 ,完成 布局 外 观 设计 ,如 图 2-3-2 所 示 。 





Logo 及 一 级 导航 区 域 











协会 内 容 显示 区 


新 闻 内 容 显 示 区 





协会 联系 显示 区 
合作 伙伴 显示 区 





版 权 及 联系 我 们 内 容 显示 区 








2-3-2 ”网 站 首页 布局 图 


(2) 内 容 编 排 
根据 图 2-3-2 所 示 的 区 域 图 ,分 别 设计 每 一 个 分 区 内 容 、 表 现 及 互动 效果 。 


's 心 成 都 市 互联 网 协会 首页 协会 动态 。 会 员 中 心 “互联 网 + “行业 政策 。 成 都市 互联 网 研究 院 关于 协会 
Internet Society Of Chengdu 


图 2-3-3 网 站 Logo 及 一 级 导航 区 域 设 计 效 果 图 


GD Logo 及 一 级 导航 区 域 设 计 

头 部 包含 一 级 导航 菜单 和 Logo。Header 标记 中 包含 两 个 div, 其 id 分 别 为 logo .nav1， 
效果 如 图 2-3-3 所 示 。 在 id 为 navl 的 div 中 设置 一 级 水 平 导 航 菜单 。 采 用 无 序列 表 实 现 ， 
每 个 列表 项 表示 1 个 导航 菜单 ; 在 id 为 logo 的 div 中 设置 Logo 图 像 超 链接 ,实现 代码 如 
下 所 示 : 


< header id = "header"> 
<div id= "logo"> 
<a href = "http://www. iscd. org. cn/">< img src = "images/logo. png" width = "270px" /></a 
href = "http://www. iscd. org. cn/"> 
</div> 
<div id= "navl"> 
<ul class=""> 
<1li class = "active"><a href =" 井 ">< span> 首 页 </span></a></1i> 
<1i><a href =" 井 ">< span > 协会 动态 </span></a></1i> 
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<1i><a href =" 井 ">< span > 会员 中 心 </span></a></1i> 
<1i><ahref=" 井 "><span> 互 联网 +</span></a></1i> 
<1i><ahref="#"><span> 行 业 政策 </span></a></1i> 
<1i><ahref=" 井 "><span> 成 都 市 互联 网 研究 院 </span></a></1i> 
<1i><ahref ="#">< span> 关 于 协会 </span ></a></1i> 
</ul> 
</div> 
</header > 


@ 纯 CSS3 实现 图 像 轮 播 

利用 CSS3 动画 animation 属性 给 图 像 定 义 动画 关键 帧 。 在 两 个 div 中 分 别 采用 无 序 
列表 装载 三 幅 图 和 三 个 序号 。 页 面 效 果 如 图 2-3-4 所 示 。 外 图 层 div 的 类 名 为 container, 其 
内 包含 一 个 class 为 img 图 层 ,其 中 又 包含 一 个 class 为 bg 的 div。 分 别 在 class 为 nav 的 无 
序列 表 ul 和 id 为 lp 的 列表 项 上 绑 定 动画 myfirst,myfirstArr, 然 后 定义 关键 帧 ,完成 动画 。 
代码 如 下 所 示 : 





图 2-3-4 纯 CSS3 实现 的 焦点 图 切换 的 效果 图 


< div class = "container"> 
< div class = "img"> 
<ul class = "nav"><! -- 绑 定 动画 myfirst 15.5s infinite 一 -> 
<li><a href ="#" >< img src= "images/t3_pic_1.jpg"></a></1i> 
<li><a href ="#">< img src = "images/t3 pic 2. jpg"></a></1i> 
<li><a href ="#" >< img src = "images/t3_pic_3. jpg"></a></1i> 
</ul> 
<div class= "bg"> 
<ul class= "bg in"> 
<1i>1</1i> 
<11>2</11> 
<1i>3</1i> 
<1li id= "lp"></1i><! -- 绑 定 动画 myfirstArr 15.5s infinite -一 > 
</ul > 
</div> 
</div> 
</div> 


@) 协会 动态 内 容 显示 区 

采用 图 层 和 表格 实现 局 部 布局 。 利 用 CSS3 的 转换 ,过渡 及 动画 分 别 定义 此 区 域 中 图 
像 的 整体 盘旋 动画 和 单个 图 像 盘旋 动画 。 在 一 个 class 为 move 的 div 中 插入 3 行 4 列 的 表 
格 ,单元 格 分 别 插入 图 层 ` 图 像 和 段落 .页面 效果 如 图 2-3-5 所 示 ,代码 如 下 所 示 : 





协会 动态 








全 二 委 才 各 轩 全 三 向 的 it 于 而 基石 十 二 基 天 疗 [T 六 龙 互联 网 + 取代 家 
和 


300 方 斤 移 人 [李爽 多 各 基态 豆 联 
网 内 全 fOE 二 陪 过 15 历 电 辣 二 所 全 才 休 二 了 风 理 双 和 





ERRREE3 


号 机， 为 全 业 帮 me 力 一 天 中 
TT Te 


图 2-3-5 ”协会 动态 局 部 页 面 效 果 图 


<div id= "xh"> 
< section id = "section center"> 
<hgroup> 
< hl > 协会 动态 </hl > 
<h3 > Rssociation dynamics </h3 > 
</hgroup > 
</section> 
</div> 
<div class = "move"> 
<table align = "center" cellpadding = "10px"> 


< 
<td> 
<div>< img class = "imghover" src= "images/t3_1.png" /></div> 
<p> 协 会 受 邀 参加 易 创 经 云 锐 创 社 平台 发 布 会 </p> 
</td> 
<td> 


<div>< img src = "images/t3_2.png" /></div> 
<p> 九 寨 沟 300 万 斤 脆 红 李 滞 销 成 都 市 互联 网 协会 和 四 川 邮政 发 起 15 家 电 商 平台 …</p> 
</td> 
<td> 
<div>< img src = "images/t3_3. jpg"></div> 
<p> 第 四 十 二 期 天 府 IT 沙龙 "互联 网 + 现代 农业 + 乡村 旅游 " 跨 界 探讨 圆满 举 …</p> 
</td> 
<td> 
<div>< img src = "images/t3_4. jpg"></div> 
<p> 协 会 与 猪八戒 网 签约 共 推 成 都 互联 网 服务 产业 </p> 
</td> 
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</tr> 
<tr> 
<td> 
<div>< img src = "images/t3_5. jpg" /></div> 
<p> 中 山大 学 副 校 长 李 善 民 一 行 莅临 成 都 市 互联 网 协会 调研 指 …</p> 
</td> 
<td> 


<div>< img src = "images/t3_6. jpg" /></div> 
<p> 推 进 成 都 互联 网 行业 " 独 角 曾 "培育 建立 成 都 互联 网 产业 高 地 一 协会 为 成 都 …</p> 
</td> 
<td> 
<div>< img src = "images/t3_7. jpg" /></p></div> 
<p> 为 企业 成 功 助力 天 府 区 沙龙 : 企业 跨 界 和 人 才 培 养 沙 龙 剪影 </p> 
</td> 
<td> 
<div>< img src = "images/t3 8.jpg" /></div> 
<p> 协 会 受 邀 参加 "2017 中 国 软件 生态 大 会 "</p> 
</td> 
</tr> 
<tr> 
<td colspan= "4" id= "al" class = "a0"> 
<a href =" 间 ">< span > 更 多 内 容 </span></a> 
</td> 
</tr> 
</table> 
</div> 





@ 新 闻 资 讯 内 容 显 示 区 

采用 图 层 和 表格 实现 局 部 布局 。 利 用 CSS3 的 转换 、 过 渡 及 动画 分 别 定义 此 区 域 中 图 
像 的 整体 盘旋 动画 和 单个 图 像 盘旋 动画 。 在 一 个 class 为 move 的 div 中 插入 3 行 4 列 的 表 
格 ,单元 格 分 别 插入 图 层 ` 图 像 和 段落 ,页面 效 果 如 图 2-3-6 所 示 ,代码 如 下 所 示 : 











WS* 池 和 入 全 | 着 尖 和 明生 
平 SGolun 理 安 : 共事 车 行 全 有 四 
sy ;2017-08-22 1731 


本 多 
meses : 2017-08-22 1148 









CT 


| 一 用 “互联 喇 * 年 时 农业 凡 争 代 失 | 
Magy: 2017.08.18 1547 Man : 2017-08-18 1528 


Mrat : 2017-08-22 1014 ses: 2017-08-21 1620 


图 2-3-6 ”新闻 资讯 局 部 页 面 效果 图 





<div id = "xw"> 
< section id = "section_center"> 
< hgroup > 
<hl > 新 闻 资 讯 </hl > 
< h3 > News information </h3 > 
</hgroup> 
</section> 
</div> 
<div class = "move"> 
<table align = "center" cellpadding = "10px"> 


<tr> 
<td> 
<div>< img class = "imghover" src = "images/txw3_1.png" /></div> 
<p>" 共 享 农 业 ": 不 一 样 的 共享 经 济 </p> 
<p> 发 布 时 间 : 2017 - 08 - 25 09:28 </p> 
</td> 
<td> 
<div>< img src = "images/txw3_2. jpg" /></div> 
<p> 共 享 云 推动 社交 电 商 崛起 </p> 
<p> 发 布 时 间 : 2017- 08- 23 09:44 </p> 
</td> 
<td> 
<div>< img src = "images/txw3_3. jpg"></div> 
<p>WISEx 新 共享 行业 峰会 | 首 汽 共享 租车 平台 Gofun 谭 奕 : 共享 汽车 行业 有 四 …</p> 
<p> 发 布 时 间 : 2017- 08 一 22 17:51 </p> 
</td> 
<td> 
<div>< img src = "images/txw3_4. jpg"></div> 
<p> 国 泛 互联 网 企业 迎 来 "大 航海 时 代 "</p> 
<p> 发 布 时 间 : 2017- 08- 22 11:48 </p> 
</td> 
</tr> 
<tr> 
<td> 
<div>< img src = "images/txw3_5. jpg" /></div> 
<p> 农 村 电 商 20 年 :农民 网 店 开创 农村 电 商 新 纪 …</p> 
<p> 发 布 时 间 : 2017- 08- 22 10:14</p> 
</td> 
<td> 
< div>< img src = "images/txw3_6. jpg" /></div> 
<p> 慧 博 科 技 CE0 张 学 锋 :新 零售 将 实现 裂变 核 爆 …</p> 
<p> 发 布 时 间 : 2017 08 一 21 16:20 </p> 
</td> 
<td> 
<div>< img src = "images/txw3_7. jpg" /></p> 
</div> 
<p>" 绿 色 + 智 能 "成 制造 业 下 一 个 风口 </p> 
<p> 发 布 时 间 : 2017 -08 一 18 15:47 </p> 
</td> 
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<td> 
<div>< img src = "images/txw3_8. jpg" /></div> 
<p> 用 "互联 网 +" 重 塑 农业 竞争 优势 </p> 
<p> 发 布 时 间 : 2017- 08- 18 15:28 </p> 
</td> 
</tr> 
<tr> 
<td colspan = "4" id= "a2" class = "a0"> 
<a href ="#"><span> 更 多 内 容 </span></a> 
</td> 
</tr> 
</table> 
</div> 


@ 协会 联系 内 容 显示 区 

采用 文章 article 和 表格 实现 局 部 布局 ; 利用 CSS3 的 转换 、 过 渡 对 此 区 域 中 所 有 图 像 
定义 盘旋 时 放大 图 像 的 效果 ,在 一 个 id 为 rhxx 的 article 中 插入 1 行 4 列 的 表格 ,单元 格 分 
别 插入 图 层 ,标题 组 、 标 题字、 图 像 。 页 面 效 果 如 图 2-3-7 所 示 ,代码 如 下 所 示 : 


2-3-7 ”协会 联系 局 部 页 面 效 果 图 


<article id= "rhxx"> 
< table align= "center" cellspacing = "5px" width = "900px" height = "100px"> 
<tr> 
<td> 
<div class = "rh">< img src = "images/ticon3 1.png" /> 
<hgroup> 
<h2 > 协会 规章 </hl > 
<h4 > association system </h3 > 
</hgroup> 
</div> 
</td> 
<td> 
<div class = "rh">< img src = "images/ticon3_2. png" /> 
<hgroup> 
<h2> 申 请 入 会 </h2> 
<h4> Apply for membership </h4 > 


<td> 
<div class= "rh">< img src = "images/ticon3 3.png" /> 
<hgroup> 
<h2 > 组 织 架构 </h2 > 


< h4 > Organizational </h4 > 
</hgroup> 
</div> 
</td> 
<td> 
<div class = "rh">< img src = "images/ticon3 4.png" /> 
<hgroup> 
<hl > 联系 我 们 </hl > 
< h3 > Contact us </h3 > 
</hgroup> 
</div> 
</td> 
</tr> 
</table> 
</article> 


@ 合作 伙伴 内 容 显 示 区 

采用 图 层 嵌 套 实现 局 部 布局 。 利 用 jQuery、CSS3 的 转换 、 过 渡 对 此 区 域 中 所 有 图 像 轮 
播 效 果 。 使 用 两 个 JavaScript 文件 ,分 别 为 jquery-1. 10. 1. min. js、idangerous. swiper. min. js, 使 
用 两 个 CSS 文 件 , 分 别 为 idangerous_swiper. css、slide. css。 页 面 效 果 如 图 2-3-8 所 示 ,代码 
如 下 所 示 : 


| 名 [EE Srvdm 本 


图 2-3-8 合作 伙伴 局 部 页 面 效果 图 


<div class = "device"> 
< div class = "swiper ~ container"> 
<div class = "swiper — wrapper"> 
<div class = "swiper 一 slide "> 
< div class = "title">< img src= "images/tf3_1. jpg"> </div> 
</div> 
<div class= "swiper - slide "> 
<div class = "title">< img src = "images/tf3_2. jpg"></div> 
</div> 
<div class= "swiper — slide "> 
<div class= "title">< img src = "images/tf3_3. jpg"></div> 
</div> 
<div class = "swiper — slide "> 
<div class = "title">< img src = "images/tf3_4. jpg"></div> 
</div> 
<div class= "swiper — slide "> 
<div class = "title">< img src = "images/tf3_5. jpg"></div> 
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</div> 
<div class = "swiper — slide "> 
<div class = "title">< img src = "images/tf3_6. jpg"></div> 
</div> 
</div> 
</div> 
<div class = "pagination"></div> 
</div> 
</article> 
< script src= "js/jquery- 1.10.1.min. js"></script> 
< script src = "js/idangerous. swiper. min. js"></script> 
< Script> 
Var mySwiper = new Swiper('. swiper - container',{ 
pagination: '. pagination'v 
paginationClickable: true, 
centeredSlides: false, 
slidesPerView:5, 
watchActiveIndex: false 
]) 


</script> 


链接 两 个 外 部 CSS 文件 ,格式 如 下 所 示 : 


< link rel = "stylesheet" href = "css/idangerous_swiper.css"> 
< link rel = "stylesheet" href = "css/slide.css"> 


@ 版 权 及 联系 我 们 内 容 显示 区 

采用 footer 和 图 层 实现 局 部 布局 ; 利用 CSS3 的 转换 .过 渡 定 义 此 区 域 中 图 像 在 盘旋 时 
放大 的 效果 ; 在 一 个 id 为 footer 的 footer 标记 中 分 别 插入 id 分 别 为 全、f2,f3 的 三 个 div 标 
记 , 并 在 每 个 div 标记 中 分 别 插入 相关 段落 、 标 题 和 图 像 标 记 , 实 现 联 系 我 们 、 友 情 链 接 、 微 
信 公 众 号 等 区 域 信息 设计 及 底部 版 权 区 域 设计 ,页 面 效果 如 图 2-3-9 所 示 ,代码 如 下 所 示 : 


联系 我 们 


大 和 市 联网 协 : 





Oia6 坟 瑟 了 网 协 全 ICP 委 13002747 呈 -1 扶 术 尘 : 竹子 寻 站 


图 2-3-9 版 权 及 联系 我 们 局 部 页 面 效 果 图 


< footer id= "footer"> 
<div id= "fl"> 
<h2 > 联系 我 们 </h2 > 
<h3 > 成 都 市 互联 网 协会 </h3 > 


<p> 联 系 电话 : 028 - 85321197 </p> 
<p> 00: 2639158356/2832787567 </p> 
<p> 邮 箱 : iscd@ iscd.org.cn</p> 
<p> 地 址 : 成 都 市 高 新 区 天 府 五 街 200 号 蔓 获 国际 广场 A1/6 楼 </p> 
<p> 第 五 维 空间 </p> 
</div> 
<div id= "f2"> 
<h2 > 友情 链接 </h2 > 
<h3 > 地 联 科技 </h3 > 
</div> 
<div id= "f3"> 
< h2 > 成 都 市 互联 网 协会 </h2 > 
< img src = "images/twx3_1. jpg" /> 
<h3 > 协会 官方 公众 号 </h3 > 
</div> 
</footer > 
< div id= "botinfo"> 
<p> &copy; 成 都 市 互联 网 协会 蜀 ICP 备 13002747 号 - 1 技术 支持 : 竹子 建站 </p> 


</div> 


(3) 表现 设计 
网 站 样式 包含 三 个 外 部 样式 表 和 一 个 内 部 样式 表 。 外 部 样式 表 引 用 格式 如 下 所 示 : 


< link rel = "stylesheet" type = "text/css" href = "css/focusimage. css"> 
< link rel = "stylesheet" href = "css/idangerous_swiper.css"> 
<link rel = "stylesheet" href = "css/slide.css"> 


@ 网 站 内 部 样式 设置 


* {margin: 0;padding: 0;border: 0;} 
/* 头 部 logo 及 导航 部 分 样式 * / 
# header {width: 100% ;height: 65px;margin— top: 30px;text — align: center;} 
#1o0go {text - align: center;vertical - align: middle;float: left; 
margin— left: 125px;width: 289px; height: 65px;display: inline;} 

#1o0go img {margin: 5px auto;} 
#navl {text— align: center;height: 63px;display: inline;float: left;} 
#navl ul {list— style- type: none;margin - top: 25px;padding - left: 160px;} 
# navl ul 1i {float: left;font: 14px/16px 微软 雅 黑 ;} 
#navl ul lia {padding ~ left: 10px;padding — right: 10px;} 
#navl ul li a:active,#navl ul li a:visited, #navl ul lia:link { 

text — decoration: none;color: black;} 
/* 第 一 个 导航 active 默认 样式 */ 
.active a:active, .active a:link, .active a:visited { 

border: 1px dashed #36D9CB;} 
#navl ul li a:hover {color: #336D9CB;border: 1px dashed #36D9CB;} 
/* 协会 内 容 和 新 闻 资讯 信息 部 分 样式 * / 
# section center {margin: 10px auto; 

text ~ align: center;color: #2969B0;margin: 0 150px;} 
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#xh, #xw {clear: both;padding: 0;margin: 10px auto;width: 100 ;} 

# section_center hgroup {border - top: 1px solid black;padding ~ bottom: 10px; 

border — bottom: 1px solid black;padding — top: 10px;} 

table {margin: 0 auto; height: 400px;text — align: center; 

margin— left: 150px;margin— right: 150px;} 

/* 设 置 img 的 过 渡 属 性 ,很 关键 * / 

td div img, #£3 imgftransition: all 0.5s;} 

td img {width: 248px; height: 180px;padding: 0 auto;} 

td p {width: 248px;font — size: 14px;color: # EEEB; 

text - align: left;font - family: "微软 雅 黑 ";} 
td div img:hover, # £3 img:hover {overflow: hidden; 
transform: scale(1.2, 1.2);transition: all 0.5s;} 

td div {overflow: hidden;display: block;} 

/* 设 置 "更 多 信息 " 超 链接 样式 * / 

.a0{height: 35px;padding: 0;margin: 0;width: 100%;} 

.a0 a{text - decoration: none;padding - top: 5px;width: 140px;height: 28px; 
padding - bottom: 5px;border - radius: 12px;font: 16px/1.5em "微软 雅 黑 "; 
display: inline - block;color: #FFFFFF;background: #45D2FF;} 

.a0 a:link, .a0 a:visited, .a0 a:active{color: #FFFFFF;} 

.a0 a:hover {background: #33A5C9;} 

/* 当 鼠 标 在 图 层 move 上 时 ,表格 中 的 所 有 图 像 均 添加 动画 ,在 Y 轴 上 缩放 0-1 倍 */ 

.move{width:100 % ;height: 580px;} 

. move: hover table td img{animation: mymoving 0.5s;} 

@keyframes mymoving{ 

0% {transform: scale(0,0);} 

25 % {transform: scale(0.25,.25);} 
50% {transform: scale(0.5,.5);} 
75% {transform: scale(0.75,.75);} 
100% {transform: scale(1,1);} 

} 

/* 入 会 信息 部 分 样式 * / 

#4rhxx {background: #3CCCCCC;width: 100 % ;height: 160px;} 

# rhxx table {margin: 0 auto;} 

/* 合作 伙伴 部 分 样式 * / 

# hzhb {background: #F2F2F2;width: 100% ;height: 272px;text ~ align: center;} 

# hzhb hgroup {padding - top: 30px;} 

/* 版 权 及 底部 信息 部 分 样式 * / 

# footer {background: #017CC3;width: 100 % ;height: 380px;} 

#3f1,#f2,#f3 {margin: 40px 10px;float: left;width: 320px; 

height: 280px;color: #FFFFFF;padding: 15px;line— height: 2.5em;} 

#f1 {margin— left: 200px;} 

.rh{padding ~- top:10px;} 

.rh img {width: 50px; height: 50px;} 

#f£3 {text— align: center;} 

#f£3 img {width: 160px; height: 160px;margin: 20px auto;display: block;} 

#f1 h2, #f2 h2 {padding - bottom: 10px; 
border - bottom: 2px solid # FFFFFF;font ~ size: 18px;} 

#f1 h3,#f2 h3 {padding - top: 15px;padding - bottom: 20px;font — size: 16px;} 

# botinfo {margin: 0 ;padding: 0;clear: both;width: 100 % ;height: 20px; 

text ~ align: center;font — size: 14px;padding - bottom: 5px;} 


@ 网 站 外 部 样式 设置 
。 纯 CSS3 焦点 图 样式 文件 focusimage. css 


/x CSS3 焦点 图 focusimage.css < / 
x* {margin: 0;padding: 0;} 
html {overflow: scroll;} 
body, html {width: 100% ;height: 100% ;font— size: 12px; 
font - family: ' 微 软 雅 黑 ',，Verdana, Arial, Helvetica, sans-— serif;} 
ul,ol {list— style: none;} 
div {height: auto;} 
img{display: block;border: none;} 
.Container {text — align: center;width:100 % ;height: 453px;margin: 0 auto; 
margin - top: 20px;border: 5px solid #d0d0d0;overflow: hidden;} 
. img {width: 100 % ;height:100 % ;overflow: hidden;position: relative;} 
.bg {/* 序号 显示 区 */ 
width: auto; height: 20px;z — index: 99;position: absolute; 
left: 47.50% ;bottom: 15px;} 
.bg_in {width: 200px;height: 20px;position: relative;} 
.bg_in 1i { /* 显示 动画 图 像 序号 * / 
width: 20px; height: 20px;line ~ height: 20px;border — radius: 20px; 
background: #ffffff;opacity: 0.5;text— align: center;color: #333333; 
float: left;margin— right: 10px;position: relative;z— index: 999;} 
.bg_in #1p {position: absolute; left: Opx;top: 0;background: #ff3c00; 
opacity: 1;z- index: 998; 
animation: myfirstArr 15.5s infinite; 
— webkit - animation: myfirstArr 15.5s infinite; /* 浏览 器 兼容 性 处 理 * / 
— moz— animation: myfirstArr 15.5s infinite; 
-0- animation: myfirstArr 15.5s infinite;} 
.nav {width: 300% ;height: 453px;position: absolute; left: Opx;top: 0; 
Z- index: 9;animation: myfirst 15.5s infinite; /* 第 一 帧 动画 */ 
— webkit ~ animation: myfirst 15.5s infinite; 
-0-animation: myfirst 15.5s infinite; 
— moz ~ animation: myfirst 15.5s infinite; 


overflow: hidden; /x* 新 增 * /} 
.nav 1i {float: left;width:33.33333333%; /* 列表 项 的 长 度 为 咏 的 1/3*/} 
.nav lia img{width:100%; /* 新 增 样式 ,将 图 像 放大 到 全 屏 x /} 


@keyframes myfirst { 

0% {left: Opx;} 

28% {left: Opx;} 

50% {left:—100%;} 

66% {left:—100%;} 

80% {left: — 200%;} 

99% {left: ~200%;} 

100% {left: — Opx;} 
} 
/* 增加 各 类 浏览 器 兼容 性 样式 ,在 @ 后 面 + 相应 的 浏览 器 前 缀 + keyframes ,如 @ - webkit 一 
keyframes myfirst { } 等 , 帧 样式 相同 * / 
@keyframes myfirstArr { 

0% {left: Opx;} 
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30% {left: Opx;} 

50% {left: 30px;} 

66% {left: 30px;} 

80% {left: 60px;} 

99% {left: 60px;} 

100% {left: Opx;} 
} 
/* 增加 各 类 浏览 器 兼容 性 样式 ,在 @ 后 面 + 相应 的 浏览 器 前 缀 + keyframes ,如 @ - webkit - 
keyframes myfirstArr { } 等 , 帧 样式 相同 * / 


。 jQuery 焦点 图 样式 文件 idangerous_swiper. css 


. Swiper 一 container { 
margin:0 auto; 
position:relative; 
overflow: hidden; 
— webkit — backface — visibility:hidden; 
— moz— backface — visibility:hidden; 
—ms— backface— visibility:hidden; 
-0- backface— visibility:hidden; 
backface — visibility:hidden; 
/x Fix of Webkit flickering */ 
z— index:1; 
| 
. Swiper — wrapper { 
position:relative; 
width:100%; 
— webkit — transition ~ property: ~ webkit ~ transform, left, top; 
— webkit ~ transition— duration:0s; 
— webkit ~ transform:translate3d( Opx, 0,0); 
— webkit ~ transition ~ timing ~ function:ease; 
— moz— transition— property: ~ moz ~ transform, left, top; 
— moz— transition~ duration:0s; 
— moz ~ transform:translate3d( Opx, 0,0); 
-moz ~ transition~ timing ~ function:ease; 
-0- transition - property: ~ 0o~ transform, left, top; 
-0- transition— duration:0s; 
—- 0- transform:translate3d(Opx, 0,0); 
-0- transition- timing -~ function:ease; 
— 0- transform:translate( Opx, Opx); 
-ms- transition~ property: ~- ms — transform, left, top; 
—ms- transition~ duration:0s; 
—ms— transform:translate3d(Opx, 0,0); 
—ms— transition~ timing ~ function:ease; 
transition - property:transform, left, top; 
transition— duration:0s; 
transform:translate3d( Opx, 0, 0); 
transition ~ timing ~ function: ease; 
— webkit ~ box — sizing: content 一 box; 


一 moz 一 box— sizing: content — box; 
box— sizing: content — box; 

} 

. SWwiper — free 一 mode > .swiper — wrapper { 
— webkit — transition ~ timing ~ function: ease ~— out; 
— moz— transition — timing ~ function: ease— out; 
一 ms 一 transition 一 timing - function: ease— out; 
-0- transition— timing — function: ease ~ out; 
transition — timing - function: ease — out; 
margin: 0 auto; 


' 

.Swiper — slide { 
float: left; 
— webkit ~ box — sizing: content — box; 
— moz — box— sizing: content ~ box; 
box — sizing: content — box; 

} 


。 幻灯 片 样式 文件 slide. css 


/x slide.css */ 
.device{margin: 0 150px; position: relative; 
height: 120px; padding: 5px 15px;text — align: center; } 
, Swiper — container { position: relative; 
height: 100px; text — align: center; } 
. Swiper — slide {height: 100% ;opacity: 0.4; 
— webkit — transition: 300ms; 
— moz— transition: 300ms; 
-ms 一 transition: 300ms; 
-0o- transition: 300ms; 
transition: 300ms; 
— webkit ~ transform: scale(0); 
— moz— transform: scale(0); 
一 ms 一 transform: scale(0); 
-0—- transform: scale(0); 
transform: scale(0); 
} 
.Swiper — slide — visible { 
opacity: 0.5; 
— webkit ~ transform: scale(0.8); 
— moz— transform: scale(0.8); 
—ms— transform: scale(0.8); 
—0o- transform: scale(0.8); 
transform: scale(0.8); 
} 
. Swiper — slide — active { top: 0; opacity: 1; 
— webkit ~ transform: scale(1); 
— moz— transform: scale(1); 
—ms— transform: scale(1); 
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—0o— transform: scale(1); 
transform: scale(1); 


.title img{width:145px; height: 90px;padding: 5px 10px;transition: all 0.5s;} 
.title img:hover{transform: scale(1.1,1.1);transition: all 0.5s;} 
.pagination { position: absolute; z— index: 20; left: Opx; 
width: 100 % ;text — align: center;bottom: 5px;height: 20px;} 
. Swiper - pagination — switch {display: inline— block; width: 15px;height: 15px; 
border - radius: 10px; background: #aaa;margin— right: 10px;cursor: pointer; 
— webkit — transition: 300ms; 
一 moz 一 transition: 300ms; 
一 ms 一 transition: 300ms; 
-0- transition: 300ms; 
transition: 300ms; 
‘opacity: 0; position: relative; top: — 50px; } 
. swiper — visible— switch {opacity: 1;top: 0;background: #8A8A8A;} 
. SWwiper - active ~ switch { background: #FFFFFF;} 
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课外 拓展 训练 1 


1. project_1_1. html 


<! -- project 1_1.html 
功能 : meta、h3、hr,p 等 标记 的 应 用 
标题 为 "常用 标记 的 应 用 " 
--> 
<!doctype html > 
<html lang = "en"> 
<head> 
<! -一 meta 标记 的 应 用 --> 
<meta charset = "UTF — 8"> 
< meta name = "Generator" content = "EditPlus?"> 
<meta name = "Ruthor" content = "Web 前 端 开 发 工程 师 "> 
< meta name = "Keywords" content = "Web 前 端 开发 、 网 页 设计 、 企 业 建 站 "> 
<meta name = "Description”content = "专门 为 机 关 、 企 ( 事 ) 业 、 个 体 开发 网 站 定制 页 面 "> 
<title> 常 用 标记 的 应 用 </title> 
</head> 
<body> 
<h3 align = "center"> meta、h3、hr、p 等 标记 的 应 用 </h3 > 
<hr color = "#FFOOFF"> 
< p> &nbsp; &nbsp; &nbsp; &nbsp;HTML 标准 自 1999 年 12 月 发 布 的 HTML4. 01 后 ,后 继 的 
HTML5 和 其 他 标准 被 束之高阁 ,为 了 推动 web 标准 化 运动 的 发 展 ,一 些 公司 联合 起 来 ,成 立 了 一 个 叫 
作 Web Hypertext Application Technology Working Group (Web 超 文本 应 用 技术 工作 组 -WHATWG) 的 
组 织 。</p> 
</body> 
</html > 


2. project_1_2. html 


<! -- project 1 2.html 
标题 : body 属性 及 注释 标记 的 应 用 
功能 : 利用 css 和 body 属性 设计 彩色 页 面 
二 二 学 
<!doctype html > 
<html lang = "en"> 
< head> 
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<! -- meta 标记 的 应 用 --> 
<meta charset = "UTF — 8"> 
<title> body 属性 及 注释 标记 的 应 用 </title> 
<! -- 插入 内 部 样式 表 --> 
< style type = "text/css"> 
p{text - indent:2em; /x* 定义 首 行 缩 进 2 个 字符 * /} 
div{border:1px dotted #660033; /* 定义 div 的 边框 样式 * /} 
</style> 
</head> 
< comment > body 的 属性 应 用 </comment > 
< body text = "white" topmargin = "50px" leftmargin = "50px" bgcolor = "#6633ff"> 
<! -- 插入 1 个 图 层 div --> 
<div id="" class=""> 
< comment > 在 div 中 插入 标题 字 、 水 平分 隔 线 和 有 段落 </comment > 
<h2 > 设计 彩色 页 面 </h2 > 
<hr color =" 井 00ff00"> 
<p> HTML(HYper Text Mark - up Language) 即 超 文 本 标记 语言 , 是 WWW 的 描述 语言 ,由 
Tim Berners - Lee 提出。 设计 HTML 语言 的 目的 是 为 了 能 把 存放 在 一 台 计算 机 中 的 文本 或 图 形 与 男 
一 台 计 算 机 中 的 文本 或 图 形 方便 地 联系 在 一 起 ,形成 有 机 的 整体 , 人们 不 用 考虑 具体 信息 是 在 当前 
计算 机 上 还 是 在 网 络 的 其 他 计算 机 上 。</p> 
<hr color = "#ff0066"> 
</div> 
</body> 
</html > 


课外 拓展 训练 2 


1. project 2_1.html 


<b Project 251 nL 一 二 二 
<!doctype html > 
<html lang = "en"> 
<head> 
<meta charset = "UTF — 8"> 
<title> font 标记 及 文本 标记 的 应 用 </title> 


</head> 
<body> 
<h4 align = "center"> font 标记 及 文本 标记 的 应 用 </h4 > 
<blockquote> 


<font size= "5" color = "blue" face= "黑体 "> 平淡 的 语言 九 娓 道 来 , 如 清水 芙 鞭 , 不 

带 半 点 修饰 。 完 全 是 信 手 拓 来 , 没有 任何 矫 揉 造作 之 痕 , 正 是 平平 淡淡 才 是 真 。</font > 

</blockquote> 

<p> gnbsp;&nbsp;&nbsp;&nbsp;<b> 客 居 他 乡 的 游子 , 面 对 如 和 霜 的 秋月 怎 能 不 想念 故乡 \ 不 
想念 亲人 呢 ?</b><u><i> 如 此 一 个 千 人 吟 .万 人 唱 的 主题 却 在 这 首 小 诗 中 表现 得 淋漓 尽 致 ,以致 千 
年 以 来 脸 炙 人 口 ,流传 不 衰 !</i></u></p> 

</body> 

</html> 


2. project 2_2. html 


<L== Project 2 2.htal =-> 
<!doctype html > 
< html lang = "en"> 
< head > 
<meta charset = "UTF — 8"> 
<title> 食 品 安全 管理 制度 </title> 
<style type = "text/css"> 
h3{font - size:36px;background: # 3366ff;color:white;padding:10px;} 
</style> 
</head> 
<body> 
<h3 align = "center"> 食 品 安全 管理 制度 </h3 > 
<ol> 
<1i> 食 堂 从 业 人 员 和 管理 人 员 必 须 掌握 有 关 食品 卫生 的 基本 要 求 。</1i> 
<1i> 食 堂 从 业 人 员 每 年 必须 进行 健康 检查 ,新 参加 工作 和 临时 参加 工作 的 食品 生产 经 
营 人 员 都 必须 进行 健康 检查 </1i> 
<1i> 食 堂 从 业 人 员 在 出 现 咳嗽 ,腹泻 、 发 热 . 呕 吐 等 有 碍 于 食品 卫生 的 症状 时 ,应 立即 
脱离 工作 岗位 , 待 查 明 病 因 , 排 除 有 碍 食品 卫生 的 病症 或 愈 后 方 可 重新 上 岗 。</1i> 
<1i> 食 堂 从 业 人 员 应 有 良好 的 个 人 卫生 习惯 , 必须 做 到 : 
< ul type = "square"> 
<1i> 工 作 前 ,处 理 食品 原料 后 用 肥皂 及 流动 清水 洗手 ; 接触 直接 入 口 食品 之 
前 应 洗手 消毒 。</1i> 
<1i> 穿 戴 清洁 的 工作 衣 、 帽 ,并 把 头发 置 于 帽 内 。</1i> 
<1i> 加 工 食品 时 不 得 留 长 指甲 , 涂 指甲 油 及 戴 戒 指 等 。</1i > 
<1i> 不 得 在 食品 加 工 和 销售 场所 内 吸烟 。</1i> 
</ul> 
</li> 
</ol> 
<hr color = "#3366ff" size= "40px"> 
</body> 
</html > 


课外 拓展 训练 3 


1. project 3_1.html 


<l=— project 3:1, hal 一 = 二 
<!doctype html > 
<html lang= "en"> 
< head > 
<meta charset = "UTF ~- 8"> 
<title> 桂 林 风 景 展览 </title> 
< style type = "text/css"> 
img{width:100px; height :100px; border:0;} 
h3{color: # ff0000;} 


> 溃 雪 
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ul{list— style— type:none; text ~ align:center;} 
li{display: inline;width:120px; line — height:30px;} 
</style> 
</head> 
<body> 
<h3 align = "center" > 桂林 风景 展览 </h3 > 
<ul> 
<1i><a href = "image31. jpg" target =" top">< img src = "image31. jpg" alt = ""> 
<br > 桂林 风景 1<br></a></1i> 
<1i><a href = "image32. jpg">< img src = "image32. jpg" alt = "">< br > 桂林 风景 2 
<br></a></1i> 
<1i><ahref = "image33. jpg">< img src = "image33. jpg" alt = "">< br > 桂林 风景 3 
<br></a></1i> 
<1i><a href = "image34. jpg">< img src = "image34. jpg" alt = "">< br > 桂林 风景 4 
<br></a></1i> 
</ul> 
</body > 
</html> 


2. project 3_2. html 


<! —— project 3 2.htnl --> 
<! doctype html > 
< html lang = "en"> 
< head> 
<meta charset = "UTF — 8"> 
<title> 中 国名 牌 大 学 简介 </title> 
</head> 
< body> 
<h3 align = "center"> 中 国名 牌 大 学 简介 </h3 > 
<hr> 
<marquee behavior = "alternate”onmouseover = "this. stop();" onmouseout = 
"this. start();"> 
<a href = "http://www. tsinghua. edu. cn/"> 清 华 大 学 </a> 
<a href = "http://www. pku. edu. cn/"> 北 京 大 学 </a> 
<a href = "http://www. pku. edu. cn/"> 上 海 交 通 大 学 </a> 
<a href = "http://www. fudan. edu. cn/index. html"> 复 旦 大 学 </a> 
<a href = "http://www.nju. edu. cn/"> 南 京 大 学 </a> 
<a href = "http://www.xjtu. edu. cn/"> 西 安 交通 大 学 </a> 
<a href = "http://www. hit. edu. cn/"> 哈 尔 滨 工业 大 学 </a> 
</marquee > 
<hr> 
</body> 
</html > 


课外 拓展 训练 4 


1. project_ 4_1. html 


<! -- project 4 1.html 一 一 > 
<!doctype html > 
< html lang = "en"> 
< head> 
<meta charset = "UTF — 8"> 
<title> 文 轩 图 书 榜 </title> 
< style type = "text/css"> 
#divi{margin: 5px;width:160px; height :150px; border:1px solid # ee0e0e0;float:1left;} 
#3div2{width:700px; height:150px;} 
#div3{width:900px; height :150px; border:1px solid #FOFOF0;float:left;} 
ul{flist- style- type:none;} 
li{line— height:1. Sem;} 
. Spl{background: # ff0033;color:white;width:10px; height:10px;} 
.sp2{font:bolder 16px 黑体 ;} 
.sp3{color: 井 ff0033;font:bolder 16px 黑体 ;} 
.sp4{color: 井 c0c0c0;font:bolder 16px 黑体 ;text - decoration:1ine- through;} 
p{text - indent:2em;} 
</style> 
</head> 
<body> 
<h3> 文 轩 图 书 榜 </h3> 
<div id= "div3" class= ""> 
<div id= "divl" class=""> 
< img src= "image4 — 3.jpg" width= "160" height = "160" border = "0" alt = ""> 
</div> 
<div id= "div2" class=""> 
<ul> 
<1i>< span class = "spl"> &nbsp;9&nbsp;</span>< span class = "sp2"> 古 汉语 常 
用 字 字 典 (第 4 版 )</span></1i> 
<1i>(13 条 评论 )</1i> 
<1i> 王 力 等 原著 者 2005 年 07 月 < span class = "sp3"> 商 务 印 书 馆 </span></1i> 
<1i><p> 本 书 由 著名 语言 学 家 王 力 、 岑 鹿 祥 、 林 春 、 戴 澧 . 唐 作 藩 、 蒋 绍 思 等 十 余 位 
专家 学 者 编写 ,是 学 习 古 汉语 的 必 备 工具 书 。</p></1i> 
< 1i> 购 买 收藏 < span class = "sp3"> 25. 60 元 </span> (8.0 折 ) 定价 : < span 
class = "sp4"> 圣 32. 00 元 </span ></1i> 


</ul> 
</div> 
</div> 
</body> 
</html > 


> 溃 雪 
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2.project 4_2. html 


<! -- project 4 2.html 一 一 > 
<! doctype html > 
<html lang = "en"> 
< head> 
< meta charset = "UTF — 8"> 
<title> 巴 城 老 街 风 景 </title> 
< style type = "text/css"> 
img{width: 150px; height: 100px; border: 20px inset #006633;} h3{font — 
Size:48px;line — height:1. 5em; text ~ align: right; color:white; background: # 009966; }p{ text — 
indent :2em; font — size: 28px; line — height: 1. 5em; letter — spacing: 2px; text — decoration: 
underline;} 
div{width:100 % ;height:160px;float:left;} 
</style> 
</head> 
<body> 
<h3 > 巴 城 老 街 风 景 </h3 > 
<p> 巴 城 老 街 位 于 江苏 的 阳澄湖 。 在 江南 , 人们 都 喜欢 吃 又 香 又 肥 腻 的 阳澄湖 大 闸 蟹 ， 
大 疗 蟹 的 产地 就 在 巴 城 。 相 传 第 一 个 吃 螃 艇 的 人 巴 解 就 是 巴 城 老 街 的 人 。 


</p> 

<div id="" class=""> 
< img src= "image42. jpg" > 
< img src = "image43. jpg" > 
< img src = "image44. jpg" > 
< img src = "image45. jpg"> 

</div> 

</body> 
</html > 


课外 拓展 训练 5 


1. project_S_1.html 


< project Sel hin —=> 
<!doctype html > 
<html lang = "en"> 
<head> 
<meta charset = "UTF — 8"> 
<title> DIV+ CSS 页 面 布局 设计 </title> 
< style type = "text/css"> 
#container{width:100 % ;margin:0 auto;padding:0 auto;} 
# header{width: 100 % ; height: 70px; background: # 99ff66; border - bottom: 2px solid 
#ffffff;} 
#nav {width: 100 % ; height: 28px; background: # 99ff66; border — bottom: 2px solid 
#ffffff;} 
# mainbody{width:100 % ;height :300px; margin:0 auto; padding:0 auto; border - bottom: 
2px solid #ffffff;} 


#1eft{float: left; background: # 99ff33;width:25 % ;height:300px;border - right:2px 
solid #ffffff;} 
/* 方 法 1: left、right 分 别 向 左 和 向 右 浮动 ,中 间 用 margin 设置 * / 
井 middle{fmargin:0 25% 0;background: #99ff99; 
width:100 % ;height:300px;} 
#right{float:right;background: # 99ff00;width:25 % ;height:300px;} 
#marquee{width: 100 % ; height: 26px; background: # 99ff66; border — bottom: 2px solid 
#ffffff;} /* 方 法 2: 中 间 div 的 位 置 放 在 左右 侧 div 的 下 面 # middle{background: # ccff66; 
width:74.5% ;height:300px;} */ 
/* 方 法 3: left、middle 向 左 浮动 ,right 向 右 浮动 , width 的 百分比 值 可 能 有 差异 * / 
/* #middle{float:left;background: # ccff66;width:49.5% ;height:300px;} */ 
# footer{width:100 % ;height:50px;background: # 99ff00;} 
#clearfloat{clear:both; border - bottom:2px solid # ffff00;} 
</style> 
</head> 
<body> 
<div id= "container" class=""> 
<div id= "header" class =""> 头 部 </div> 
<div id= "nav" class = ""> 导 航 </div> 
<div id= "mainbody" class = ""> 
<div id= "left" class =""> 左 边 </div> 
<div id= "right" class =""> 右 边 </div> 
<div id= "middle" class =""> 中 间 </div> 
</div> 
<div id= "clearfloat" class = ""></div> 








<div id = "marquee" class = "">< marquee > 滚动 </marquee></div> 
< div id = "footer" class = ""> 版 权 部 分 </div> 
</div> 
</body> 
</html > 


2. project_ 5_2.html 


<l== project 552.benl 一 = 之 
<!doctype html > 
<html lang = "en"> 
<head> 
<meta charset = "UTF — 8"> 
<title> HTML5 简介 </title> 
< style type= "text/css"> 
p span{font - weight:bold;font ~ style:italic;} 
div{padding:20px 10px;} 
p,ul{text — indent:2em;line— height:1.5em;} 
h2{font - weight :bold;background: # 006633;padding:10px;color:white;} 
</style> 
</head> 
<body> 
<div> 


< h2 > HTML5 是 如 何 起 步 的 ?</h2 > 


> 加 且 
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<p> HTML5 是 W3C 与 WHATWG 合作 的 结果 。</p> 
<p class = "note">< span > 编者 注 : </span>W3C 指 World Wide Web Consortium, 万 
维 网 联盟 。</p> 
<p class = "note">< span > 编者 注 : </span > WHATWG 指 Web Hypertext Application 
Technology Working Group。</p> 
<P> WHATWG 致力 于 web 表单 和 应 用 程序 ,而 W3C 专注 于 XHTML 2.0。 在 2006 年 ， 
双方 决定 进行 合作 ,来 创建 一 个 新 版 本 的 HTML。</p> 
<h2 > 为 HTML5 建立 的 一 些 规则 : </h2 > 
<ul> 
<1i> 新 特性 应 该 基于 HTML、CSS、DOM 以 及 JavaScript。</1i> 
<1i> 减 少 对 外 部 插件 的 需求 (比如 Flash)</1i> 
<1i> 更 优秀 的 错误 处 理 </1i> 
<1i> 更 多 取代 脚本 的 标记 </1i> 
<1i> HTML5 应 该 独立 于 设备 </1i> 
<1i> 开 发 进程 应 对 公众 透明 </1i> 
</ul > 
</div> 
</body> 
</html> 


课外 拓展 训练 6 


1. project 6_1.html 


= project 6 1. btnl ==> 
<!doctype html > 
<html lang = "en"> 
<head> 
<meta charset = "UTF — 8"> 
<title > 新 书 推荐 </title> 
< style type = "text/css"> 
img{width:150px; height :200px;} 
table{} 
</style> 
</head> 
<body> 
< table border = "lpx" cellspacing = "0px" bordercolor = "#f0f0f0"> 
<tr> 
<td colspan = "4">< h4 > 总 编 推荐 </h4 ></td> 
</tr> 
tr 
<td>< img src = "image61. jpg"></td> 
< td><p><h4 > 数学 的 世界 I</h4 > 作者 : J.R. 纽曼 编 , 王 善 平 ， 李 囊 译 定价 : 
59.00 元 推荐 理由 : 呈现 在 大 家 面前 的 是 由 J.R. 纽曼 花费 十 五 年 心血 ,所 精 选 的 迄今 为 止 世界 上 
最 天 才 的 数学 文献 集锦 。 高 …</p></td> 
<td>< img src = "image62. jpg"></td> 
<td><p><h4 > 现代 教育 技术 </h4 > 作者 : 傅 钢 善 定价 : 39. 80 元 推荐 理由 : 本 
教材 结构 新 颖 , 逻辑 清晰 , 图文并茂 ,内 容 丰 富 , 易 教 易学 ,知行 合 一 。</p></td> 


</tr> 
<tr> 
<td>< img src = "image63. jpg"></td> 
<td><p><h4 交 生态 智慧 一 一 生态 可 持续 性 )</h4 > 作者 : 伍 业 钢 定价 : 29. 00 
推荐 理由 : 传统 的 经 济 学 认为 ,经 济 的 投入 和 产 出 可 以 简化 为 "资本 + 劳动 "的 投入 等 于 经 济 增长 ,而 
忽略 了 对 劳动 者 的 人 文 关 怀 (以 人 为 本 …</p></td> 
<td>< img src = "image64. jpg"></td> 
<td><p><h4 > 中国 工程 院 院 士 (11)</h4> 作者 : 中 国 工程 院 、 高 等 教育 出 版 社 、 
中 国 工程 物理 研究 院 定价 : 500. 00 推荐 理由 : 中 国 工程 院 院 士 是 国家 在 工程 技术 方面 设立 的 最 高 
学 术 称 号 ,为 终身 荣誉 。 为 了 展现 中 国 工程 院 院士 的 风采 、 宣 传 科 学 家 积极 投身 … 
</p></td> 
</tr> 
</table> 
</body> 
</html > 


2. project 6_2. html 


<! -- project 6 2.htnl -一 > 
<!doctype html > 
<html lang = "en"> 
<head> 
<meta charset = "UTF — 8"> 
<title> 区 域 划分 </title> 
< style type = "text/css"> 
#tdi{background: #333300;color:white;} 
#td2{background: #553300;color:white;} 
#td3{background: #773300;color:white;} 
#td4{background: #993300;color:white;} 
#td5{background: # AA3300;color:white;} 
td{text ~ align:center;vertical - align:middle;font ~ size:36px;} 
</style> 
</head> 
<body> 
< table border = "5" width = "650px" height = "350px" align = "center"> 
<tr> 
<td id= "tdl" colspan= "2">1 服务 区 </td> 
<td id= "td2" rowspan= "2">2 行 政 区 </td> 
</tr> 
< 
<td id= "td3" rowspan= "2">3 生活 区 </td> 
<td id= "td4" >4 共享 区 </td> 
</tr> 
过 二 > 
<td id= "td5" colspan = "2"> 5 娱乐 区 </td> 
Re 
</table> 
</body> 
</html > 
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课外 拓展 训练 7 


1. project_7_1.html 


<! —— project 7 1.html 
功能 : 设计 一 个 参 会 注册 表 
-=-> 
<!doctype html > 
<html lang= "en"> 
<head> 
<meta charset = "UTF — 8"> 
<title> 参 会 注册 表 </title> 
</head> 
<body> 
< form method = "post”action = ""> 
<table border = "1" align = "center"> 
< caption > 参 会 注册 表 </caption> 
<tr> 
<td> 姓 名 : < input type = "text" name = "" size= "10"></td> 
<td> 单 位 :< input type = "text" name = "" size= "30"></td> 
</tr > 
<tr> 
<td> 性 别 : < input type = "radio" name = "xb"> 男 < input type = "radio" name 
= "xb"> 女 </td> 
<td> 手 机 : < input type= "text" name= "" size= "11"></td> 
</tr> 
<tr> 
<td> 酒 店 : < input type = "radio" name = "hotel"> 天 山大 酒店 < input type 
= "radio" name = "hotel"> 昆 伦 饭 店 </td> 
<td> 预 订房 间 数 :< input type = "text" name = "" size = "4"> 套 </td> 
</tr> 
<tr> 
< td colspan = "2"> 房 间 类 型 : < input type = "radio" name = "lx"> 单 人 间 
(320 元 )< input type = "radio" name = "1x"> 标 准 双 人 间 (380 元)< input type = "radio" name = "1x"> 
家 庭 套间 (450 元 )</td> 
</tr> 
<tr> 
<td colspan = "2" align = "center">< input type = "submit" value = "提交 "> 
Snbsp; gnbsp; &nbsp; gnbsp;< input type = "reset"></td> 
</tr> 
</table> 
</form> 
</body> 
</html > 


2. project_7_2.html 


<! -- project 7 2.html 
功能 : 图 书馆 读者 调查 问卷 
-=> 
<!doctype html > 
<html lang = "en"> 
< head > 
<meta charset = "UTF — 8"> 
<title> 图 书馆 读者 调查 问卷 </title> 


</head> 
<body> 
< table border = "10" bordercolor = "#ffccff" align= "center" width= "700px"> 
<tr> 
<td align = "center">< h2 > 图 书馆 读者 调查 问卷 </h2 ></td> 
</tr> 
<tr> 
<td> 


<p style= "text -indent:2em;"> 为 了 能 够 及 时 了 解 您 对 图 书馆 的 需求 , 提升 我 校 
图 书馆 文献 资源 建设 的 质量 和 水 平 ,更 好 地 为 我 校 教 学 科研 服务 ,我 馆 特 设计 了 问卷 调查 题目 如 下 ， 
请 协助 填写 ,谢谢 您 的 合作 !</p> 


</td> 
</tr> 
EE 
<td> 
<table> 
<tr> 
<td>1. 您 的 年 级 </td> 
</tr> 
<tr> 
<td> 
请 您 选择 : 
< select name = ""> 
< option value = "" selected > 请 您 选择 
< option value = "bl"> 大 一 </option> 
< option value = "b2"> 大 二 </option> 
< option value = "b3"> 大 三 </option> 
< option value = "b4"> 大 四 </option > 
< option value = "b5"> 其 他 </option > 
</select> 
</td> 
</tr> 
</table> 
</td> 
</tr> 
<tr> 
<td> 
<table> 
<tr> 


<td>2. 您 的 专业 </td> 
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</td> 


</tr> 
< 
<td>< input type = "text" name = "b2" size= "60" maxlength= "80"> 


</tr> 
</table> 
</td> 
</tr> 
<tr> 
<td> 
<table> 
<tr> 
<td>3. 对 于 图 书馆 的 阅览 环境 </td> 
</tr> 
过 让 > 
<td>< input type = "radio" name = "b2" value = "b2"> 满 意 </td> 
</tr> 
<tr> 
<td>< input type = "radio" name = "b2" value = "bb"> 基 本 满意 </td> 
</tr> 
<tr> 
<td> < input type = "radio" name = "b2" value = "bc"> 不 满意 您 的 建议 : < 


input type = "text" name = ""size= "20"></td> 


</td> 


</tr> 
</table> 
</td> 
</tr> 
<tre> 
<td> 
<table> 
<tr> 
<td>4. 您 到 图 书馆 的 原因 是 (可 多 选 ): </td> 
</tr> 
<tr> 
<td>< input type = "checkbox" name = "b3" value = "al"> 借 阅 专业 图 书 


</tr> 
<tr> 
<td>< input type = "checkbox" name = "b4" value = "a2"> 随 便 坐 坐 , 翻 


翻 书刊 </td> 


</td> 


</tr> 
<tr> 
< td>< input type = "checkbox” name = "b5" value = "a3"> 借 阅 光 盘 


</tr> 
<tr> 
<td>< input type = "checkbox" name = "b9" value = "a7"> 参 加 图 书馆 组 


织 的 活动 </td> 


</tr> 


过 E> 
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<tdalign= "center" height = "50px"> 
< input type = "submit" value = "提交 答案 "> 
< input type = "reset" value = " 清 &nbsp; &nbsp; gnbsp; &nbsp; 空 "> 
</td> 
</tr> 
</table> 
</form> 
</body> 
</html > 


课外 拓展 训练 8 


1. project_8_1.html 


<! -- project_8_1.html htm15 + CSS3 注册 表单 --> 
<!DOCTYPE html > 
< htm]l > 
<head> 
<meta charset = "utf 一 8" /> 
< style> 
body { 
background: url('project_8_1_bg. jpg') repeat; 
font - family: Arial Narrow, Arial, sans— serif; 
margin: 0;padding: 0;} 
header, section, footer {display: block;} 
header {width: 100 % ;margin— bottom: 20px;position: relative; 
background - color: rgb(0, 0, 0); 
background - color: rgba(0, 0, 0, 0.9); 
color: #ccc;padding: 15px 0;letter - spacing: lpx;} 
header hl { margin: 0 50px;text - shadow: 2px 2px 2px #888;float: left; } 


#backlinks { float: right; margin: 一 10px 20px; text ~ align: right; 
line — height: 25px; font - weight: bold;font - size: 12px;} 
#backlinks a { color: #ccc;text - decoration: none; 
margin: 3px 0 0; display: block; } 
#backlinks a:hover { color: #fff;} 
footer { background - color: rgb(0, 0, 0); 
background - color: rgba(0, 0, 0, 0.8);height: 25px;width: 100%; 
line - height: 25px; position: relative; font - family: Arial, Helvetica, 
sans— serif; 
bottom: 0;left: 0;color: #888; font - size: 11px;} 
footer span { padding — left: 20px; } 
footer a {color: #1FA2E1;} 
井 wrapper { width: 770px; margin: 0 auto; text — align: center;} 


#wrapper hgroup { margin: 20px 0;text — shadow: 1px 1px 1px # cce; } 
井 wrapper hl {color: #146FAO0; font — size: 42px;margin: 0;} 


#wrapper h2 {color: #71C1ED;font — size: 27px;margin: 0;} 
#1bl {color: #777;font— size: 17px;font — weight: bold; 


text - shadow: lpx 1px 0 #fff; margin: 10px0;  } 
# :focus {outline: none; } 
label, input, textarea, fieldset { display: block;} 
fieldset#account, fieldset#personal { 
width: 250px; padding: 0 50px 50px;margin: 10px; float: left; 
background: rgb(244, 244, 244); 
background: rgba(244, 244, 244, 0.7); 
— webkit ~ border - radius: 25px; / * Chrome 和 Safari */ 
— moz — border ~ radius: 25px; /xFirefoxx/ 
border - radius: 25px; /* 圆 角 边框 */ 
border: 3px double #999; } 
fieldset# confirm { padding 一 top: 10px; clear: both; 
border: none; line— height: 15px; margin: 10px 0; } 
fieldset# confirm label, fieldset# confirm input { 
display: inline; float: left; margin: 15px 5px 0; } 
legend {font — size: 20px; font - weight: bold; letter - spacing: 5px; 
color: #999; margin ~ left: — 20px;text ~ align: left; 
padding: 0 10px; text — shadow: 1px 1px 0 #ccc; } 
label { font - size: 17px;font ~ weight: bold; margin: 17px 0 7px; 
text ~ align: left; text - shadow: 1px lpx 0 #fff; /x 文本 阴影 */ } 


textarea {resize: both;max — width: 230px;} 
input. textbox, textarea {padding: 5px 10px; 
— webkit ~— border - radius: 15px; /* 圆 角 边框 */ 
— moz — border — radius: 15px; 
border - radius: 15px;border: 1px solid #fff; 
width: 200px; text — shadow: 1px 1px 1px #777; 
box— shadow: 0px 2px 0px #999; 
transition: all 0.5s ease— in— out; /* 过 渡 */ 
background: url('project 8_1_required. png') no - repeat 200px 5px # FOFOEF; 


} 
input. textbox: focus, textarea:focus { 
transform: scale(1.1); /* 放 大 1.1 倍 x*/ 
box — shadow: 7px 7px 2px #ccc; /* 边框 阴影 */ 
text — shadow: 1px 1px 3px #777; /* 文 本 阴影 */} 


input. textbox:required { 
background: url('project 8_1_required. png') no - repeat 200px 5px # FOFOEF; 
background: url('project 8_1_required. png') no - repeat 200px 5px, — webkit — 
gradient(linear, left top, left bottom, from(#E3E3E3), to( # FFFFFF)); 
| 
input. textbox:required:valid { 
background: url('project 8_1_valid. png') no - repeat 200px 5px # FOFOEF; 
background: url( 'project 8_1_valid. png') no - repeat 200px 5px, — webkit 一 
gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF)); 
} 
input. textbox:focus: invalid, 
input. textbox:not( :required) : invalid { 
background: url('project 8_1_invalid.png') no— repeat 200px 5px # FOFOEF; 
background: url('project 8_1_invalid.png') no - repeat 200px 5px, — webkit— 


gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF)); 


} 
input[type = "submit"] { /* 属性 选择 器 * / 
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padding: 10px; margin: 0 10px ! important; 
width: 300px;border — radius: 12px; 
background: #F7F7F7; border:3px groove #F3D3C3; } 


#rangevalue { display: block;text — align: right; 
margin 一 top: — 25px; width: 265px;} 


input: - webkit- input - placeholder, textarea: - webkit — input ~ placeholder { 
/* 将 占 位 符 中 提示 信息 颜色 定义 为 浅 灰 色 * / 
Color: #aaa; font - style: italic;text - shadow: 1px lpx 0 #fff;} 
input: ~ moz - placeholder, textarea: — moz — placeholder { 
/* ”将 占 位 符 中 提示 信息 颜色 定义 为 浅 灰色 */ 
color: #aaa; font - style: italic;text — shadow: lpx lpx 0 #fff;} 
.Clearfix {clear: both;} 
</style> 
</head> 
<body> 
<div id= "wrapper"> 
<div id= "lbl"></div> 
<form> 
<fieldset id = "account"> 
< legend> 个 人 信息 </legend> 
< label for = "username"> 账 号 :</label > 
< input id= "username" class = "textbox" type = "text" name = "username" 
required placeholder = "请 填写 账号 " /> 
< label for = "password1"> 密 码 :</label > 
< input id= "password1" class = "textbox" type = "password" name = 
"passwordl" required placeholder = "请 填写 密码 " /> 
< label for = "password2"> 重 复 密码 :</label> 
< input id = "password2" class = "textbox" type = "password" name= 
"password2" required placeholder = "请 重复 密码 " /> 
< label for = "email"> 邮 箱 地 址 :</label > 
< input id = "email" class = "textbox" type = "email" name = "email" 
required placeholder = "www. csdn. com" /> 
</fieldset > 
<fieldset id = "personal"> 
< legend> 其 他 信息 </legend> 
< label for = "website"> 个 人 网 址 :</label > 
< input id = "website" class = "textbox" type= "url" name = "website" 
required placeholder = "http://www. example. com" /> 
< label for = "age"> 年 龄 :</label > 
< input id = "age" class = "textbox" type = "number" name = "age" min= "18" 
step = "2" pattern= "[0-9]{1,3}" placeholder = "填写 年 龄 "> 
<label for = "salary"> 月 薪 :</label> 
< input id = "salary" class = "textbox" type = "range" name = "salary" min 
= "0" max = "50000" step = "500" pattern="[0 一 9]{2,}”placeholder = "输入 月 薪 " value = 
"10000" onchange = "showValue(this. value)" /> 
< span id= "rangevalue"> 10000 </span> 
<script> 





function showValue(value) { 
document. getElementById("rangevalue"). innerHTML = value; 
} 
</script> 
< label for = "description"> 描 述 :</label > 
< textarea id= "description" name = "description" cols = "30" rows = "5" 
placeholder = "这 里 是 详细 描述 "> </textarea> 
</fieldset> 
<fieldset id = "confirm"> 
< input type = "submit" value = "提交 " /> 
<div class = "clearfix"></div> 
</fieldset > 
</form> 
</div> 
</body> 
</html > 


2. project 8_2. html 


<! -- project 8 2.html 
功能 :CSs3 过 渡 特 性 画廊 
--> 
<!doctype html > 
<html lang = "en"> 
<head> 
<meta charset = "UTF — 8"> 
<title> CSS3 过 渡 画 廊 </title> 
< style> 
body {background: # dce4e4; font - family: Georgia, "Times New Roman", Times, 
serif;} 
#9gallery { width: 1000px; height: 1200px; 
margin: 20px auto; padding: 40px; position: relative;} 
#9gallery div { background: #3fff; position: absolute; 
overflow: hidden; ‘opacity: 0.9; 
transition: all 1500ms linear; /* 线 性 过 渡 1.5sx* / 
— webkit ~ transition: all 1500ms linear; 
— webkit ~— border ~ radius: 15px; 
一 moz - border - radius: 15px; 
border - radius: 15px; 
— webkit — box— shadow: 一 3px — 3px 50px #666; 
— moz— box— shadow: — 3px — 3px 50px #666; 
box— shadow: — 3px — 3px 50px #666;} 
#9gallery div# imgl :hover, #9gallery div# img2:hover, 
#9gallery div# img3:hover, #9gallery div# img4:hover, 
#9gallery div# img5 :hover, #9gallery div# img6 :hover { 
z— index: 999; transform: rotate(0deg); /* 通用 浏览 器 */ 


— webkit - transform: rotate(O0deg); V/x* Chromex / 
— moz — transform: rotate(0deg) ; /xFirefoxx/ 
‘opacity: 1;} 
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#gallery span { position: absolute;right: 0; bottom: 15px; 
color: #999; background: #fff; width: 35%; 
text ~ align: right; padding: 10px; font — size: 13px; 
font - weight: bold;} 

并 gallery img { /x* 图 像 遮盖 */ 

— webkit — mask — box — image: url('project 8 2 _ background. svg'); 

— webkit — mask — repeat: none; /* 遮盖 图 像 不 重复 * /} 
#9gallery # imgl { 

— webkit - transform: rotate( — 15deg); 

一 moz - transform: rotate( - 15deg); 

top: 50px; left: 130px; z— index:1;} 

#9gallery # img2 { - webkit — transform: rotate( - 15deg); 

一 moz- transform: rotate( - 15deg); top: 300px; left:100px; z— index:7;} 

#9gallery # img3 { 

— webkit — transform: rotate( - 5deg); 
— moz— transform: rotate( - 15deg); 
top: 450px; left:350px; Zz- index:3;} 
# img3 img { width: 350px;} 
#gallery #img4 { /x* eye */ 
— webkit ~ transform: rotate( - 10deg); 
— moz — transform: rotate( — 10deg); 
top: 450px; left: 650px; z— index:4;} 
#9gallery # img5 { 
— webkit ~ transform: rotate(Sdeg); 
一 moz 一 transform: rotate(S5deg); 
top: 一 100px'; right: 200px; z- index:5;} 
#9gallery # img6 { 
— webkit ~ transform: rotate(20deg); 
— moz— transform: rotate(20deg); 
top: 220px; right: 120px; z- index:6;} 
</style> 
</head> 
<body> 
<div id= "gallery"> 

<div id= "img1"> 
< img src = "project_8_2_1. jpg"> 
< span> Image 1 caption </span> 

</div> 

<div id= "img2"> 
< img src = "project_8_2_2. jpg"> 
< span> Image 2 caption </span> 

</div> 

<div id= "img3"> 
< img src= "project 8 2 3.jpg"> 
< span> Image 3 caption </span> 

</div> 

<div id= "img4"> 
< img src= "project 8 2 4.jpg"> 
< span> Image 4 caption </span> 
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</script> 
</body> 
</html > 


2. project_ 9_2. html 


<! -- project 9 2.html -一 > 
<!doctype html > 
<html lang = "en"> 
< head> 

<meta charset = "UTF — 8"> 

<title> 简 易 密码 验证 </title> 

< script type = "text/javascript"> 

function checkKey( ){ 
/* 密码 验证 要 求 : 密码 长 度 大 于 等 于 8, 必须 含有 字母 ; 


*/ 

Var keystr = document. myform. key. value; // 获 取 密 码 

var count = 0; // 密 码 中 含有 字母 的 个 数 
// 判 断 密码 的 长 度 


if (keystr. length<8 ) 
{ 
alert(" 密 码 长 度 必须 大 于 等 于 8! ,请 重 输 !"); 
document. myform. key. value = ""; 
} else{ 
// 判 断 密码 中 是 否 含有 字母 aa - Zz 
for (var i=0;i<= keystr. length—1 ;i++) 
{ 
var onechar = keystr. charAt (i). toUpperCase( ) // 每 次 循环 取 一 位 字符 
if (onechar > = "A" && onechar <= "2Z" ){ count++;} 
// 是 字母 , 则 计数 器 加 1 
} 
if (count <1) 
{ 
alert(" 密 码 中 必须 包含 一 个 以 上 字母 ! ,请 重 输 !"); 
document. myform. key. value = ""; 
} 
} 
} 
</script > 
</head> 
<body> 
<h3 > 简易 密码 验证 </h3 > 
< form name = "myform"> 
< label > 用 户 名 : </label >< input type = "text" name = "username"” value = " 张 试 验 " 
readonly><br> 
< label > 密码 : </label >< input type = "password" name = "key"><br> 
< input type = "button" value = "验证 " onclick = "checkKey();"> 
< input type = "reset" > 
</form> 
</body> 
</html> 


课外 拓展 训练 10 


1. project_10_1. html 


<! -- project 10_1.html ——> 
<!doctype html > 
<html lang = "en"> 
<head > 
<meta charset = "UTF 一 8"> 
<title> 找 出 符合 条 件 的 数 </title> 
</head> 
<body> 
<h3 > 找 出 100- 999 能 够 被 11 和 7 同时 整除 的 整数 的 个 数 及 累加 和 </h3 > 
< script type = "text/javascript"> 
Ee 
document. write(" 区 间 中 符合 条 件 的 数 有 (输出 格式 : 10 个 1 行 ):<br>"); 
var count = 0; // 定 义 符合 条 件 的 数 的 计数 器 , 兼 做 分 行 变量 
for (var sum= 0,i=100;i<=999 ;i++) 
{ 
if (i%11==0 && i%7==0) 
{ 
document. write(i+" "); 
Count++; 
if (count % 10== 0) 
{ 
document. write("< br >"); 
} 
sum= sum+ i; 
} 
l 
document. write("< br> 区 间 中 符合 条 件 的 数 共 有 " + count + "个 "); 
document. write("< br> 区 间 中 符合 条 件 的 数 的 累加 和 为 " + sum) ; 
ts 
</script > 
</body > 
</html > 


2. project_10_2. html 


<! -- project 10 2.html 一 一 > 
<!doctype html > 
<html lang= "en"> 
<head> 
<meta charset = "UTF ~- 8"> 
<title> 倒 置 九 九 乘法 口诀 表 </title> 
</head> 
< body> 
<h3 > 倒置 九 九 乘法 口诀 表 </h3 > 
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< script type = "text/javascript"> 


<1— 
var cj=0; 
for (1=9;1>=1;71==) 
{ 
for (j=1;j<=i;j++) 
{ 
Cj= 1i#*3; 
document. write(j+"*"+i+"="+cj+"g&nbsp;"); 
} 
document. write("< br>"); 
} 
WA== > 
</script > 
</body> 
</html> 
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1. project_11_1. html 


es 
<html> 
<head> 
<title> 表单 数据 自动 验证 </title> 
< style type = "text/css"> 
div{margin:0 auto;padding:30px 40px 30px; 
background: # 00ff99 url("bgimages. jpg" );} 
table{border:2px double #0000cc; 
text ~ align:center;margin:0 auto;} 
#tdi{text — align:right;font ~ size:20px;color: #6600ff;} 
#td2{text — align:left;} 
label{color:red; font - weight:bold;} 


</style> 
< script type = "text/javascript"> 
// 检 查 用 户 名 的 有 效 性 、 必 填 项 验证 


function $ (id){return document. getElementById(id);} 

function checkusername( ){ 

Var namel = myform. username. value; 

$ ("err username"). innerHTML = ""; 

证 (namel =="" || namel ==nul1l ) // 为 空 或 不 输入 时 
{ $ ("err_username"). innerHTML = "用 户 名 不 能 为 空 !"; 
alert(" 用 户 名 不 能 空 !");} 

else // 有 内 容 时 

{ var firstchar = namel. charAt(0); 

if (firstchar >= "0" SS firstchar <= "9") // 首 字符 不 能 为 数字 
{ $ ("err_username"). innerHTML = "用 户 名 必须 以 字母 开头 !"; 


jelse { 

if (namel. length<6 | | namel. length> 20) 

{ 

$ ("err_username"). innerHTML = "用 户 名 长 度 大 于 等 于 6 且 小 于 等 于 20!"; 
b 

| 

} 

} 

/* 密码 有 效 性 检查 * / 

function checkpassword( ){ 

// 不 能 为 空 

Var namel = myform. username. value; 

Var pwd = myform. password. value; // 存 放 密 码 值 
$ ("err password"). innerHTML = ""; 

if (pwd=="" || pwd == null1) // 密 码 为 空 

{ // 直 接 在 输入 框 右边 显示 错误 信息 

$ ("err_password"). innerHTML = "密码 不 能 为 空 !"; 


alert(" 密 码 不 能 为 空 !") ; // 用 告警 信息 框 输入 消息 
人 length<6 || pwd. length> 20) // 检 查 密码 长 度 

. ("err_password"). innerHTML = "密码 长 度 不 能 小 于 6 或 大 于 20!1"; 
a 

{ if (pwd == namel) 


{ $ ("err_password"). innerHTML = "密码 不 能 与 用 户 名 相同 !";} 
} 

} 

/* 检查 确认 密码 有 效 性 * / 

function checkpassword 1(){ 

Var pwdl = myform. confirmpassword. value; 

var pwd = myform. password. value; // 存 放 密 码 值 
$ ("err_ password 1"). innerHTML = ""; 

if (pwdl!= pwd) 

{ $ ("err_password_1"). innerHTML = "密码 与 确认 密码 不 相同 !"; } 
| 

/* 检查 邮件 地 址 的 有 效 性 */ 

function checkemail( ){ 

Var mail = myform. mail. value; 

var apos = mail. indexOf("@"); 

Var dotpos = mail. lastIndexOf(".") 

$ ("err email"). innerHTML = ""; 

if (dotpos - apos <2) 

{$ ("err_email"). innerHTML = "邮件 地 址 格式 错误 !"; } 

} 


</script> 


</head> 
<body> 


<div id="" class=""> 
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< form name = "myform”method = "post" action="" onsubmit = ""> 
<table> 
< caption > 表单 验证 </caption > 
<tr><td> gnbsp;</td> 
<td id= "tdl"> 用 snbsp; 户 snbsp; 名 : </td> 


<td id = "td2">< input type = "text" name = "username" onblur = "checkusername( ); "> 


</td> 

<td>< label id= "err username"></label ></td> 

</tr> 

<tr>< td> gnbsp; gnbsp;</td> 

<td id = "tdl"> 密 &nbsp; &nbsp; &nbsp;&nbsp; 码 : </td> 

<td id= "td2">< input type = "password" name = "password" onblur = "checkpassword( ) ; "> 
</td> 


<td>< label id= "err password"></label ></td> 
</tr> 

<tr>< td> gnbsp; &nbsp;</td> 

<td id= "tdl"> 确 认 密 码 : </td> 


<td id = "td2" > < input type = "password" name = " confirmpassword”onblur 


"checkpassword_1();"></td> 
<td>< label id = "err_password_1"></label ></td> 
</tr> 
<tr><td> gnbsp; gnbsp;</td> 
<td id= "tdl"> 电 子 邮 件 : </td> 


<td id = "td2">< input type = "text" name = "mail" onblur = "checkemail();"></td> 


<td>< label id = "err email"></label ></td> 
</tr> 
<tr><td colspan= "4"> 
< input type = "submit"value = "提交 "> 
< input type= "reset" value= " 重 置 "></td> 
</tr> 
</table> 

</form> 

</div> 

</body> 
</htm] > 


2. project_11 2.html 


<h=— project iT 2 btnl 一 二 二 
<!doctype html > 
<html lang = "en"> 
<head> 
<meta charset = "UTF — 8"> 
<title> 学 号 合法 性 检查 </title> 
< script type = "text/javascript"> 


function checkNo( ){ 
/* 检查 内 容 : 学 号 必须 为 10 位 、 且 完全 是 数字 */ 
var stuno = myform. myno. value; // 根 据 name 取 value 


var rightbool = true; // 合 法 性 检查 变量 


if (stuno. length!= 10) 


{ 
alert(" 学 号 长 度 不 足 10 位 ,请 重 输入 !"); 
myform. myno. value = ""; // 文 本 框 清空 
}else{ 
for (var i= 0;i< stuno. length;i++) 
1 


var onechar = stuno. charAt (i); // 每 次 取 1 位 判断 
if (onechar >"9" | | onechar <"0") 


{ 
alert(" 学 号 必须 为 数字 字符 ,请 重 输入 !"); 
rightbool = false; // 只 要 有 1 位 不 是 数字 就 赋 假 值 
myform. myno. value = ""; // 文 本 框 清空 
break; 
} 


y 
证 (rightbool){alert(" 学 号 输入 正确 !");} 
} 
} 
</script> 
</head> 
<body> 
<h3 > 检查 学 号 的 合法 性 </h3 > 
< form name = "myform”method = "post”action = ""> 
输入 学 号 : < input type = "text" name = "myno" size= "10" maxlength = "10"> 
< input type = "button" value = "合法 性 检查 " onclick = "checkNo( ) ;"> 
</form> 
</body> 
</html > 
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1. project_12_1.html 


<E== project 12 1-htal 一 一 
<!doctype html > 
<html lang = "en"> 
<head> 
<meta charset = "UTF — 8"> 
<title> 列 表 框 图 像 浏览 器 </title> 
< style type = "text/css"> 


div{margin: 10px auto; border: 1px solid # 020202; width:300px; height :280px; text 


—align:center;padding:20px;} 
</style> 
< script type = "text/javascript" > 
function $ (id){return document. getElementById(id);} 
function showImg(oSel){ 
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Var str = oSel.value; 
if (abc ""){ S$ ("pic").sre = str+".jpg";} 
} 
</script> 
</head> 
<body> 
<div id="" class=""> 
< img id= "pic" src= "imgl. jpg" width= "200" height = "200" /><br><br> 
<b> 列 表 框 图 像 浏览 器 </b> 
< select id= "sel" onchange = "showImg(this)"> 
< option value = ""> 选 择 图 像 </option > 
< option value = "imgl"> 都 市 树木 1 </option > 
< option value = "img2"> 卡 通 图 片 2 </option> 
< option value = "img3"> 卡 通 图 片 3 </option> 
</select >< br/> 
</div> 
</body> 
</html > 


2. project_12 2.html 


<! -- project 12 2.html 
功能 :图 书 选 购 程序 , 具有 单一 选 购 ,单一 退 购 清空 .结账 等 功能 
--> 
<! doctype html > 
< htm]l lang = "en"> 
<head> 
<meta charset = "UTF — 8"> 
<title> 图 书 选 购 </title> 
< style type = "text/css"> 
select{width:230px; height :200px;} 
</style> 
< script type = "text/javascript"> 
function $ (id){return document. getElementById(id);} 
function doone( ){ // 单 本 选 购 
证 ($ ("booklist"). selectedIndex!= —1) 
{ 
newoption = document. createElement ("option"); 
newoption. text = $ ("booklist"). options[ $ ("booklist"). selectedIndex]. text; 
newoption. value = $ ("booklist").options[ $ ("booklist"). selectedIndex]. value; 
$ ("userlist").add(newoption); 


} 
} 
function clearnone( ){ // 清 空 
while ( $ ("userlist"). length> 0) 
| 


$ ("userlist"). remove(0); 


function undoone(){ // 退 购 


if ($("userlist" ). selectedIndex== 一 1) 
{alert(" 请 先 在 右边 选中 某 一 图 书 ,再 退 购 !")} 
var i=0; 
while (i<$ ("userlist"). length) 
{ 
if ($ ("userlist"). selectedIndex!= — 1) 
1 
$ ("userlist"). remove( $ ("userlist"). selectedIndex); 
} 
TEE 
} 
} 
function checkout(){ // 结 账 
for (var i=0,sum= 0;i<$ ("userlist"). length ;i++) 
{ 
sum= sum+ parseFloat( $ ("userlist"). options[i].value); 
} 
alert(" 请 您 付款 " + sum + "元 ,欢迎 下 次 光临 1"); 
} 
</script > 
</head> 
<body> 


< form method= "post" action=""> 
<table align = "center"> 
< caption > 选 购 图 书 </caption > 
<tr align = "center"> 
<td> 图 书 备 选 区 </td> 
<td> 图 书 采购 区 </td> 
</tr> 
<tr> 
<td> 
< select name="" id= "booklist" size="10"> 
<option value = "32”selected > 计算 机 网 络 (32 元 )</option> 
< option value = "58"> 数 据 结构 (58 元 )</option> 
<option value = "45"> Java 程序 设计 (45 元 )</option > 
< option value = "49"> Web 前 端 开发 技术 (49 元 )</option> 
< option value = "35"> Web 前 端 开发 技术 实验 与 实践 (35 元 )</option> 
< option value = "30"> 计 算 机 组 成 原理 (30 元 )</option> 
<option value = "30"> 数 据 库 开发 技术 (30 元 )</option> 
</select> 
</td> 
<td align = "center"> 
< select name= "" id= "userlist" size= "10"> 
</select> 
</td> 
</tr> 
<tr> 
<td colspan = "2" align = "center"> 
< input type = "button" value = "单一 选 购 " onclick = "doone();"> 
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< input type = "button" value = "单一 退 购 ”onclick = "undoone();"> 
< input type = "button" value = "清空 ” onclick = "clearnone( ) ;"> 
< input type = "button" value = "结账 ”onclick = "checkout();"> 


</td> 
</tr> 
</table> 
</form> 
</body> 
</html > 
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1. project_13_1.html 


<! -- project_13_1. html HTML5 拖 忠 女子 服装 购物 车 --> 
<! DOCTYPE html > 
<html lang = "en"> 
<head> 
<meta charset = "utf ~- 8"> 
<title > HTML5 拖 忠 购物 车 </title> 


<style> 
/* 购物 车 样式 */ 
/*hl img{width: 40px;height:40px;} * / 
ul, 1i{ /* 购物 清单 样式 * / 
list— style 一 type: none; 
margin: Opx; 
padding: Opx; 


cursor: pointer; 

} 

#products ul 1i{ /* 产品 列表 样式 */ 
list— style— type: none; 
display: block; 
margin: Opx; 
padding: Opx; 
cursor: pointer; 
width:185px; 
height:155px; 
float: left; 
text ~ align: center; 


| 

section# cart ul{ /* 购物 车 商品 明细 样式 */ 
height: 300px; /x* 修 改 */ 
overflow: auto; 
background — color: #FAFAFE; 

} 


section# cart img{width:30px;height: 30px;} 
img{width:150px;height:140px; ”/* 产品 图 像样 式 x /} 


</style> 
< Script> 
function 


if (typeof (window. event) != "undefined' && element. attachEvent) 


else 


} 


addEvent (element, event, delegate ) { 


element. attachEvent('on' + event, delegate); 


element. addEventListener(event, delegate, false); 


addEvent (document, 'readystatechange', function() { 


ER 


var items = document. querySelectorAll("section. products ul 1i"); 


document. readyState !== "complete" ) 


return true; 


var cart = document. querySelectorAll("#cart ul")[0]; 
function updateCart(){ 


var total = 0.0; 


var cart_items = document.querySelectorAll("#cart ul 1i") 


for (var i = 0; i<cart items. length; i++) { 
var cart_item = cart items[i]; 


var quantity = cart_item. getRttribute( 'data 一 quantity') 7 

var price = cart item.getAttribute('data— Price')7 

var sub total = parseFloat(quantity * parseFloat(price)); 
cart_item. querySelectorAll ("span. sub - total")[0]. innerHTML 


+ sub_total. toFixed(2); 


toFixed(2); 
' 


total += sub total; 
lb 


document. querySelectorAll ("# cart span. total") [0]. innerHTML 


function addCartItem( item，id) { 


} 


var clone = item.cloneNode(true); 
clone. setAttributel( 'data ~ id', id); 
clone. setAttribute( 'data ~ quantity’', 1); 
clone. removeAttribute( 'id'); 


Var fragment = document.createElement('span’'); 
fragment. setAttributel( 'class', 'quantity'); 
fragment. innerHTML = 'x1°'; 

clone. appendChild( fragment); 


fragment = document. createElement('span'); 
fragment. setAttribute( 'class', 'sub- total'); 
clone. appendChild( fragment); 

cart. appendChild( clone); 


function updateCartItem( item){ 


var quantity = item.getAttributel( 'data ~ quantity'); 
quantity = parseInt(quantity) + 1 

item. setAttribute( 'data - quantity', quantity); 

var span = item. querySelectorAll( 'span. quantity'); 
span[0]. innerHTML = 'x'+ quantity; 


total. 
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} 
function onDrop(event){ 
if(event. preventDefault) event. preventDefault(); 
if (event. stopPropagation) event. stopPropagation(); 
else event. cancelBubble = true; 
var id = event. dataTransfer. getData("Text"); 
var item = document. getElementById( id); 
var exists = document. querySelectorAll("#cart ul lildata—- id=" + id + "']"); 
if(exists. length > 0){ 
updateCartItem(exists[0]); 
} else{ 
addCartItem( item, id); 
} 
updateCart(); 
return false; 
} 
function onDragOver(event){ 
if(event. preventDefault) event. preventDefault(); 
if (event. stopPropagation) event. stopPropagation(); 
else event. cancelBubble = true; 
return false; 
} 
addEvent (cart, ‘drop', onDrop); 
addEvent (cart, ‘'dragover', onDragOver); 
function onDrag(event){ 
event. dataTransfer. effectAllowed = "move"; 
event. dataTransfer. dropEffect = "move"; 
Var target = event. target | | event. srcElement; 
var success = event. dataTransfer. setDatal( 'Text', target. id); 
} 
for (var i = 0; i< items. length; i++) { 
var item = items[i]; 
item. setAttribute("draggable", "true"); 
addEvent (item, 'dragstart', onDrag); 
}; 
}); 


var clearAll = function( ){ 


// 清 空 我 的 购物 车 
Var oU1 = document. getElementsByTagName( "ul"); 
oU1[0]. innerHTML = ""; // 将 匹 中 的 内 容 清 空 


// 将 显示 total 的 span 标记 的 内 容 还 原 为 0.0 
document. getElementsByClassName( "total")[0]. innerHTML = "0.0"; 
} 
</script > 
</head> 
<body> 
<div id= "page"> 
< section id = "cart" class = "shopping ~ cart"> 

<hl>< img src = "shoppintcart. png" /> 我 的 购物 车 </hl > 
<ul> 


</ul > 
< spsn> 总 计 : </spsn>< span class = "total"> 0. 00 </span >< span> < input type = 
"button" onclick = "clearAll();" value= "清空 我 的 购物 车 " /> </span> 
</section> 
< section id = "products" class = "products"> 
< hl > 女 式 服装 产品 列表 </hl > 
<ul><! -- 用 列表 展示 商品 清单 ,用 属性 记录 价格 -一 > 
<1li id= "product -1" data-price="69.00">< span>V 领 短 袖 T 恤 女 修 身 纯 白 
< img src = "taobao13_3_1. jpg"></span></1i> 
<1li id= "product - 2" data- price= "35.00">< span>V 领 宽松 纯 棉 打 底 衫 < img 
src = "taobaol3_3_2. jpg"></span></1i> 
<1i id= "product-3" data- price= "79.00">< span> 红 饿 原创 港 风 女 夏装 上 家 
< img src= "taobao13_3_3. jpg"></span></1i> 
<1li id= "product - 4" data - price = "59.50">< span > 韩国 新 款 圆 领 纯色 短 袖 
< img src = "taobaol3 3 4. jpg"></span></1i> 
<1liid= "product-5" data- price= "145.70"><span>V 领 双 面 精 梳 丝 光 棉 < img 
src = "taobaol3 3 _5. jpg"></span></1i> 
<1li id= "product- 6" data- price="39.99">< span > 丝光 棉 体恤 半袖 百 搭 修身 
< img src = "taobaol3_3_6. jpg"></span></1i> 
<1li id= "product-7" data price = "49.00">< span > 中 长 款 女 式 简约 开 叉 了 T 恤 
< img src= "taobao13_3_7. jpg"></span></1i> 
</ul> 
</section> 
</div> 
</body> 
</html > 


2. project_13_2. html 


<! -- project_13_2. htm]l 
功能 :用 户 输入 一 个 大 于 或 等 于 1000 的 整数 ， 
查找 在 此 数 以 内 所 有 能 被 13 和 17 同时 整除 的 所 有 整数 
=--> 
<!DOCTYPE html > 
< html > 
<head> 
<meta charset = "UTF — 8"> 
<title> web worker 实现 找 数 </title> 
</head> 
<body> 
< form> 
< label > 输入 整数 : </label> 
< input id = " inputNum" type = "text"” placeholder = "输入 大 于 1000 的 整数 " required 
="" /><br /> 
< label > 能 同时 被 13 和 17 整除 的 整数 : </label > 
< textarea id = "result”rows = "5" cols= "80"/></textarea><br /> 
< input type = "button" onclick = "startWorkerFindNumber();"”value= "启动 找 数 "> 
< input type = "button" onclick = "endWorker();" value= "停止 找 数 "> 
</form> 
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< script type = "text/javascript"> 
var work; 
var startWorkerFindNumber = function() { 
Var num = parseInt(document. getElementById("inputNum").value); 
if(num>= 1000) { 
if(typeof(Worker) != "undefined") { // 浏 览 器 支持 web worker 
if(typeof(work) == "undefined") { //work 是 未 定义 的 ,进行 定义 
// 创 建 一 个 Worker 对 象 ,利用 Worker 的 构造 函数 
Work = new Worker("project 13 2 worker.js"); 
4 
Work. postMessage( num); // 将 数据 传 给 工作 线程 
Work. onmessage = function(event) { 
// 接 收 web worker 传递 过 来 的 消息 
document. getElementById("result"). innerHTML = ""; 
document. getElementById("result"). innerHTML = event. data; 
}; 
} else1{ 
document. getElementById( "result"). innerHTML = "对 不 起 浏览 器 不 支持 
web workers! "; 
} 
} else{ 
alert(" 请 重新 输入 大 于 1000 的 整数 !"); 
document. getElementById("inputNum"). focus(); 
} 
} 
var endWorker = function() { 
work. terminate( ) ; // 利 用 Worker 对 象 的 terminated 方法 ,终止 
work = undefined; 
} 
</script > 
</body > 
</html> 


工作 线程 project_13_2_worker. js: 


/* project_13_2_worker. js 
功能 : 找 出 传人 数据 (必须 大 于 或 等 于 1000) 以 内 能 被 13 和 17 同时 整除 的 所 有 整数 ， 
接收 主线 程 传递 过 来 的 数据 ,并 将 计算 结果 传 回 主线 程 * / 
varj = 0; 
var number; 
var intArray = new Array(); 
onmessage = function(event) { 
number = event. data; 
findInt(number); // 启 动 找 数 
} 
function findInt(number) { 
for(var i = 1; i<= number; i++) { 
if(i % 13 == 0 &g& i% 17 == 0)1{ 
intArray[j] = i; 
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